<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

		<meta name="generator" content="JsDoc Toolkit" />
		<title>GoJS&reg; Reference - Index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/highlight.js"></script>
    <script src="../assets/js/api.js"></script>

    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" >
    <!-- custom CSS after bootstrap -->
    <link href="../assets/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="../assets/css/api.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="../assets/css/highlight.css" type="text/css" media="all" />


 	</head>

	<body>
    <!-- non-fixed navbar -->
    <nav id="api-nav" class="navbar navbar-inverse navbar-top">
      <div class="container">
        <div class="navbar-header" data-toggle="collapse" data-target="#navbar">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!--<a class="navbar-brand" href="#">GoJS</a>-->
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="../index.html">Home</a></li>
            <li><a href="../learn/index.html">Learn</a></li>
            <li><a href="../samples/index.html">Samples</a></li>
            <li><a href="../intro/index.html">Intro</a></li>
            <li><a href="../api/index.html">API</a></li>
            <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
            <li><a href="../doc/download.html">Download</a></li>
            <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
            <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
            <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
            <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>




    <div class="container-fluid" id="api-container">
    <div class="row">


    <div id="navindex" class="col-md-2">
        <!-- <div><a href="index.html">GoJS Class Index</a></div> -->

<div class="sidebar-nav">
  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#DiagramNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Diagram Classes</span>
    </div>
    <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        <li><a href="symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
      
        <li><a href="symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
      
        
      
        <li><a href="symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
      
        <li><a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
      
        
      
        <li><a href="symbols/Group.html" class="linkConstructor">Group</a></li>
      
        <li><a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
      
        
      
        
      
        <li><a href="symbols/Layer.html" class="linkConstructor">Layer</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/Link.html" class="linkConstructor">Link</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/Node.html" class="linkConstructor">Node</a></li>
      
        <li><a href="symbols/Overview.html" class="linkConstructor">Overview</a></li>
      
        <li><a href="symbols/Palette.html" class="linkConstructor">Palette</a></li>
      
        <li><a href="symbols/Panel.html" class="linkConstructor">Panel</a></li>
      
        
      
        <li><a href="symbols/Part.html" class="linkConstructor">Part</a></li>
      
        
      
        
      
        <li><a href="symbols/Picture.html" class="linkConstructor">Picture</a></li>
      
        <li><a href="symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
      
        
      
        <li><a href="symbols/Shape.html" class="linkConstructor">Shape</a></li>
      
        
      
        
      
        <li><a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#GeometryNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Geometry Classes</span>
    </div>
    <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/Brush.html" class="linkConstructor">Brush</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/Margin.html" class="linkConstructor">Margin</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
      
        <li><a href="symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
      
        
      
        
      
        <li><a href="symbols/Point.html" class="linkConstructor">Point</a></li>
      
        <li><a href="symbols/Rect.html" class="linkConstructor">Rect</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/Size.html" class="linkConstructor">Size</a></li>
      
        <li><a href="symbols/Spot.html" class="linkConstructor">Spot</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ModelNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Model Classes</span>
    </div>
    <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/Binding.html" class="linkConstructor">Binding</a></li>
      
        
      
        <li><a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/Model.html" class="linkConstructor">Model</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
      
        
      
        
      
        <li><a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
      
        
      
        <li><a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#LayoutNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Layout Classes</span>
    </div>
    <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
      
        
      
        <li><a href="symbols/Layout.html" class="linkConstructor">Layout</a></li>
      
        
      
        <li><a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ToolNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Tool Classes</span>
    </div>
    <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        <li><a href="symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
      
        <li><a href="symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
      
        
      
        <li><a href="symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
      
        
      
        
      
        <li><a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
      
        <li><a href="symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
      
        <li><a href="symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
      
        <li><a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
      
        <li><a href="symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
      
        <li><a href="symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
      
        <li><a href="symbols/Tool.html" class="linkConstructor">Tool</a></li>
      
        <li><a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#CollectionNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Collection Classes</span>
    </div>
    <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
      
        <li><a href="symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/List.html" class="linkConstructor">List</a></li>
      
        <li><a href="symbols/Map.html" class="linkConstructor">Map</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="symbols/Set.html" class="linkConstructor">Set</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>
</div> <!-- /class="sidebar-nav -->




    </div>

    <div id="contentBody" class="col-md-10">

      <div id="header" class="fineprint">
      <b>GoJS</b>&reg; Diagramming Components<br/>version 1.6.10 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
      </div>
      <h1 class="classTitle">GoJS Class Index</h1>
      <span class="hideshowall"><span class="nodetails"><button id="buttonShow">Show Details</button></span><span class="details"><button id="buttonHide">Show Summaries</button></span></span>


			
			
			
			<div><h2><a href="symbols/ActionTool.html" class="linkConstructor">ActionTool</a></h2><p>The ActionTool is responsible for handling and dispatching mouse events on <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>sthat have <a href="symbols/GraphObject.html#isActionable" class="linkProperty">GraphObject.isActionable</a> set to true.<span class="nodetails" id="xActionTool"><a class="morelink" onclick="hst('ActionTool')">More...</a></span> <span class="details" id="ActionTool">This is how one implements "controls", such as buttons or sliders or knobs, as <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>sthat can be inside <a href="symbols/Part.html" class="linkConstructor">Part</a>s without interfering with the standard tool behaviors.</span><div class="details" id="dActionTool"><p>This tool allows individual GraphObjects (usually Panels) to handle mouse-down-move-up events withouthaving to define new <a href="symbols/Tool.html" class="linkConstructor">Tool</a>s.It does this by calling <a href="symbols/GraphObject.html#actionDown" class="linkProperty">GraphObject.actionDown</a>, <a href="symbols/GraphObject.html#actionMove" class="linkProperty">GraphObject.actionMove</a>, <a href="symbols/GraphObject.html#actionUp" class="linkProperty">GraphObject.actionUp</a>,and <a href="symbols/GraphObject.html#actionCancel" class="linkProperty">GraphObject.actionCancel</a> on objects that have <a href="symbols/GraphObject.html#isActionable" class="linkProperty">GraphObject.isActionable</a> set to true.<p>This tool is a standard mouse-down tool, the <a href="symbols/ToolManager.html#actionTool" class="linkProperty">ToolManager.actionTool</a>.<p>This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.This tool does not modify the model or conduct any transaction, although the actions that this invokes may do so.<p>It would be very unusual to want to customize this tool.</div></div>
			
			<div><h2><a href="symbols/Adornment.html" class="linkConstructor">Adornment</a></h2><p>An adornment is a special kind of <a href="symbols/Part.html" class="linkConstructor">Part</a> that is associated with another Part,the <a href="symbols/Adornment.html#adornedPart" class="linkProperty">Adornment.adornedPart</a>.<span class="nodetails" id="xAdornment"><a class="morelink" onclick="hst('Adornment')">More...</a></span> <span class="details" id="Adornment"></span><div class="details" id="dAdornment"><p>Adornments are normally associated with a particular <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> in the adorned part --that is the value of #adornedObject.However, the #adornedObject may be null, in which case the #adornedPart will also be null.<p>The area occupied by the adorned object is represented in the adornment's visual tree by a <a href="symbols/Placeholder.html" class="linkConstructor">Placeholder</a>.The placeholder is always the <a href="symbols/Part.html#locationObject" class="linkProperty">Part.locationObject</a>,although you may specify any <a href="symbols/Spot.html" class="linkConstructor">Spot</a> as the <a href="symbols/Part.html#locationSpot" class="linkProperty">Part.locationSpot</a>.An adornment need not have a placeholder, but it may have at most one.<p>Adornments can be distinguished by their <a href="symbols/Part.html#category" class="linkProperty">Part.category</a>.This property can be an arbitrary string value determined by the code creating the adornment,typically a tool that wants to be able to tell various adornments apart from each other.Use the <a href="symbols/Part.html#findAdornment" class="linkMethod">Part.findAdornment</a> method to find an adornment for a part of a given category.<p>For example, one of the Adornments created by <a href="symbols/Part.html#updateAdornments" class="linkMethod">Part.updateAdornments</a> when the part<a href="symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a> has the <a href="symbols/Part.html#category" class="linkProperty">Part.category</a> of "Selection".Those created by <a href="symbols/ResizingTool.html#updateAdornments" class="linkMethod">ResizingTool.updateAdornments</a> have a category of "Resize"and normally contain eight resize handles.<p>Besides the selection adornment and tool adornments, adornments are also used forcontext menus and tooltips.The #adornedObject in such cases refers to the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> to which thethe context menu or tooltip applies.<p>There cannot be any links connected to an adornment,nor can an adornment have members or be a member of a group.<p>An adornment cannot have its own adornments.An adornment cannot be selected.<p>Adornments are not positioned by a <a href="symbols/Layout.html" class="linkConstructor">Layout</a> because they are normally positionedaccording to the Part that they adorn.<p>For more discussion and examples, see <a href="../../intro/selection.html">Selection</a>,<a href="../../intro/toolTips.html">ToolTips</a>,<a href="../../intro/contextMenus.html">Context Menus</a>, and<a href="../../intro/tools.html">Tools</a>.</div></div>
			
			<div><h2><a href="symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></h2><p>AnimationManager handles animations in a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.<span class="nodetails" id="xAnimationManager"><a class="morelink" onclick="hst('AnimationManager')">More...</a></span> <span class="details" id="AnimationManager"> Each Diagram has one, <a href="symbols/Diagram.html#animationManager" class="linkProperty">Diagram.animationManager</a>.Layouts, Group expansion and Tree expansion automatically start animations.</span><div class="details" id="dAnimationManager"><p>Animation is enabled by default, setting the <a href="symbols/UndoManager.html#isEnabled" class="linkProperty">isEnabled</a> property to false will turn off animations for a Diagram.<p>When an animations begins it raises the "AnimationStarting" diagram event,upon completion it raises the "AnimationFinished" diagram event.<p>Animation will stop if a new transaction is started, if an undo or redo is called,if a layout is invalidated, or if a model is replaced.When an animation is stopped, the Diagram immediately finishes the animation and draws the final state.Animations can be stopped programatically with the method <a href="symbols/AnimationManager.html#stopAnimation" class="linkMethod">AnimationManager.stopAnimation</a>.</div></div>
			
			<div><h2><a href="symbols/Binding.html" class="linkConstructor">Binding</a></h2><p>A Binding describes how to automatically set a property on a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>to a value of a property of data in the model.<span class="nodetails" id="xBinding"><a class="morelink" onclick="hst('Binding')">More...</a></span> <span class="details" id="Binding">The target property name and the data source property name are strings.All name matching is case-sensitive.</span><div class="details" id="dBinding"><p>Register bindings by calling <a href="symbols/GraphObject.html#bind" class="linkMethod">GraphObject.bind</a> with a new Binding.Existing bindings become read-only, and no new bindings may be added,when a template (a <a href="symbols/Part.html" class="linkConstructor">Part</a>) is copied.Bindings will be shared by all copies of the template's GraphObjects.<p>For example, your node data might be like:<pre>{ key: 23, say: "hello!" }</pre><p>Your simple node template might be like:<pre>  var template = new go.Node(go.Panel.Auto);  // . . . define the rest of the Node's visual tree . . .  var txt = new go.TextBlock();  txt.bind(new go.Binding("text", "say"));  template.add(txt);  myDiagram.nodeTemplate = template;</pre>Using <a>GraphObject.make</a> it might look like:<pre>  var $ = go.GraphObject.make;  myDiagram.nodeTemplate =    $(go.Node, "Auto",      . . .      $(go.TextBlock, new go.Binding("text", "say"))    )</pre><p>The data binding causes the <a href="symbols/TextBlock.html#text" class="linkProperty">TextBlock.text</a> property ofthe TextBlock to be set to the value of the data's "say" property.If the value of the "say" property of a particular data object is undefined,the binding is not evaluated: the target property is not set.If there is an error with the binding, you may see a message in the console log.For this reason you may want to explicitly set the initial value for a propertywhen defining the GraphObject, since that value will remain as the default valueif the Binding is not evaluated.<p>Sometimes the data value needs to be modified or converted in orderto be used as the new value of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> property.The most common conversion functions are provided for you --they convert a string to a geometric class:<a href="symbols/Point.html#.parse" class="linkStatic">Point.parse</a>, <a href="symbols/Size.html#.parse" class="linkStatic">Size.parse</a>, <a href="symbols/Rect.html#.parse" class="linkStatic">Rect.parse</a>,<a href="symbols/Margin.html#.parse" class="linkStatic">Margin.parse</a>, <a href="symbols/Spot.html#.parse" class="linkStatic">Spot.parse</a>, and <a href="symbols/Geometry.html#.parse" class="linkStatic">Geometry.parse</a>.But you can easily define your own conversion function.<p>As an example of a conversion function, let's use a function that adds sometext prefixing the data property value:<pre>  new go.Binding("text", "say", function(v) { return "I say: " + v; })</pre><p>By default bindings are <a href="symbols/Binding.html#OneWay" class="linkConstant">Binding.OneWay</a>.OneWay bindings are evaluated when the <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a> property is setor when you call <a href="symbols/Panel.html#updateTargetBindings" class="linkMethod">Panel.updateTargetBindings</a> or <a href="symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a>.OneWay bindings only transfer values from the source to the target.<p>TwoWay bindings are evaluated in the source-to-target direction just as OneWaybindings are evaluated.However when the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> target property is set, the TwoWaybindings are evaluated in the target-to-source direction.There is no point in having a TwoWay binding on a GraphObject property that cannot be set.For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app.<p>You should not have a TwoWay binding with a source that is a node data object's key property,i.e. on the data property whose name is the same as the value of <a href="symbols/Model.html#nodeKeyProperty" class="linkProperty">Model.nodeKeyProperty</a>.Unintentionally changing the node key value to be the same as another node data's key valuemay cause indeterminate behavior.Furthermore, changing a node data key without changing any references to that nodeusing the key value will result in "dangling" references and inconsistent relationships.You can make that change safely by calling <a href="symbols/Model.html#setKeyForNodeData" class="linkMethod">Model.setKeyForNodeData</a>,but not via a data binding.<p>The target-to-source update can also go through a conversion function.The most common back-conversion functions are provided for you.They convert a geometric class to a string:<a href="symbols/Point.html#.stringify" class="linkStatic">Point.stringify</a>, <a href="symbols/Size.html#.stringify" class="linkStatic">Size.stringify</a>, <a href="symbols/Rect.html#.stringify" class="linkStatic">Rect.stringify</a>,<a href="symbols/Margin.html#.stringify" class="linkStatic">Margin.stringify</a>, <a href="symbols/Spot.html#.stringify" class="linkStatic">Spot.stringify</a>, and <a href="symbols/Geometry.html#.stringify" class="linkStatic">Geometry.stringify</a>.<p>It is common to want to update some data properties based on changes to the diagram.For example, as the user changes the <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> by dragging a Node,you can automatically keep the node's model data in sync using a TwoWay binding.<pre>  new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)</pre>The call to <a href="symbols/Binding.html#makeTwoWay" class="linkMethod">Binding.makeTwoWay</a> changes the <a href="symbols/Binding.html#mode" class="linkProperty">Binding.mode</a>to be <a href="symbols/Binding.html#TwoWay" class="linkConstant">Binding.TwoWay</a> and specifies the <a href="symbols/Binding.html#backConverter" class="linkProperty">Binding.backConverter</a>function to be the <a href="symbols/Point.html#.stringify" class="linkStatic">Point.stringify</a> static function.<p>Because the Binding is on the whole node (<code>template</code>),the target object is the whole <a href="symbols/Node.html" class="linkConstructor">Node</a> and the target property is "location".The value of <code>data.loc</code> will be a string representation of the <code>Node.location</code> value.<p>The target of a Binding is always a property of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> or a <a href="symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>.The source of a Binding is normally a property of a data object in the model.But it is also possible to have the source of a Binding be another GraphObject that is in the same Part.You just have to make sure that object has a unique <a href="symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> or is the Part itself.The source property on the GraphObject has to be settable, and the Part must have a value for <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a>.(If the source property setter does not notify about property value changes, the binding mechanism will not be invoked.Similarly, if there is no Panel.data, the binding mechanism is not active.)<p>As a common kind of example of data binding between two properties of GraphObjects,consider this Binding on a <a href="symbols/Shape.html" class="linkConstructor">Shape</a> which changes the color of the <a href="symbols/Shape.html#stroke" class="linkProperty">Shape.stroke</a>depending on whether the Node is selected (<a href="symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a>):<pre>  new go.Binding("stroke", "isSelected", function(s) { return s ? "dodgerblue" : "gray"; }).ofObject()</pre>Note the call to <a href="symbols/Binding.html#ofObject" class="linkMethod">Binding.ofObject</a>, which tells the Binding that it should use as the sourcea GraphObject with a particular name.  However that name argument is optional -- supplying no name(or supplying an empty string) will cause the binding to operate with the root GraphObject.In this case that would be the Node itself.Now with this binding whenever the value of <a href="symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a> changes, this Shape's stroke changes color.The conversion function is what changes the boolean "isSelected" value to a brush color specifier.<p>The binding functionality also has more advanced features for less common situations.The source property name may be an empty string, to convert the object as a whole.Conversion functions may take a second argument that takes the object that is bound.For source-to-target conversions, the second argument will be the <a>GraphObject</a> whose property is bound.For target-to-source conversions, the second argument will be the source data object.<p>Here's an example of a two-way data-binding using two custom conversion functions working with two separate data properties.First we define the two conversion functions.<pre>  function toLocation(data, node) {    return new go.Point(data.x, data.y);  };  function fromLocation(loc, data) {    data.x = loc.x;    data.y = loc.y;  };</pre><p>Then to data-bind the default template's <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> propertyto two separate data properties, "x" and "y":<pre>  new go.Binding("location", "", toLocation).makeTwoWay(fromLocation)</pre><p>An empty string argument for the <i>sourceprop</i> parameter indicatesthat the whole data object should be passed to the <code>toLocation</code> function,rather than the value of some property of that data.The return value is used as the new value for the <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> property.In almost all cases the second argument is not used.For efficiency reasons you should try to avoid using an empty source property name.<p>The binding works normally for the source-to-target direction.But when the target property is modified it is the source property that isset with the back-converted property value from the target object.Because in this example the source property name is the empty string,and because one cannot replace the whole source data object,any return value from the conversion function is ignored.Instead the conversion function has to modify the data object directly,as this example <code>fromLocation</code> function does.</div></div>
			
			<div><h2><a href="symbols/Brush.html" class="linkConstructor">Brush</a></h2><p>A Brush holds color information and describes how to draw the insideof a <a href="symbols/Shape.html" class="linkConstructor">Shape</a> or the stroke of a shape or a <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a> or thebackground of any <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.<span class="nodetails" id="xBrush"><a class="morelink" onclick="hst('Brush')">More...</a></span> <span class="details" id="Brush"></span><div class="details" id="dBrush"><p>A Brush must not be modified once it has been assigned to a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>,such as the <a href="symbols/Shape.html#fill" class="linkProperty">Shape.fill</a> or <a href="symbols/TextBlock.html#stroke" class="linkProperty">TextBlock.stroke</a>or <a href="symbols/GraphObject.html#background" class="linkProperty">GraphObject.background</a>.However, a Brush may be shared by multiple GraphObjects.</div></div>
			
			<div><h2><a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></h2><p>A ChangedEvent represents a change to an object, typically a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>,but also for model data, a <a href="symbols/Model.html" class="linkConstructor">Model</a>, or a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.<span class="nodetails" id="xChangedEvent"><a class="morelink" onclick="hst('ChangedEvent')">More...</a></span> <span class="details" id="ChangedEvent">The most common case is for remembering the name of a propertyand the before-and-after values for that property.</span><div class="details" id="dChangedEvent"><p>You can listen for changed events on the model using <a href="symbols/Model.html#addChangedListener" class="linkMethod">Model.addChangedListener</a>and on the Diagram using <a href="symbols/Diagram.html#addChangedListener" class="linkMethod">Diagram.addChangedListener</a>.<p>There are four kinds of changes, represented by enumerated values:ChangedEvent.Property (the most common), ChangedEvent.Insert and ChangedEvent.Remove(to represent inserting or removing objects from collections),and ChangedEvent.Transaction (to notify about beginning or ending transactions or undo or redo).<p>The most common kind of ChangedEvent is a Property change.The name of the property is given by #propertyName.The modified object is given by #object.Use the #oldValue and #newValue properties for the before and after property values.<p>For an Insert ChangedEvent, the modified collection (often an Array) is a property value on the #object.The #propertyName helps distinguish between different collections on the object.Use the #newValue property to indicate the value that was inserted.Use the #newParam property to indicate where or how, such as an array index or dictionary key.<p>For a Remove ChangedEvent, the modified collection is a property value on the #object.The #propertyName helps distinguish between different collections on the object.Use the #oldValue property to indicate the value that was removed.Use the #oldParam property to indicate where or how, such as an array index or dictionary key.<p>Transaction ChangedEvents are generated by the <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.The #propertyName names the nature of the ChangedEvent.For the very first transaction, the property name is "StartingFirstTransaction".This ChangedEvent precedes a ChangedEvent whose property name is "StartedTransaction",which occurs for every top-level transaction.<p>When ending a transaction, there is first a ChangedEvent whose name is "ComittingTransaction".This is followed by one with either "CommittedTransaction" or "RolledBackTransaction",depending on how the transaction is ending.The #oldValue provides the transaction name and the #object is the <a href="symbols/Transaction.html" class="linkConstructor">Transaction</a> being finished.(Note that the Transaction value may be null if no Transaction is available at that time,perhaps because there were no changes made during the transaction.)That Transaction can be scanned to look for ChangedEvents that you may wish to record in a database,all within a single database transaction.<p>There are also Transaction ChangedEvents corresponding to "StartingUndo", "FinishedUndo","StartingRedo", and "FinishedRedo".The #object property provides the <a href="symbols/Transaction.html" class="linkConstructor">Transaction</a> that is about-to-be or just-was undone or redone.<p>Non-Transaction ChangedEvents are remembered by the <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a>, if <a href="symbols/UndoManager.html#isEnabled" class="linkProperty">UndoManager.isEnabled</a>,and held in the <a href="symbols/UndoManager.html#history" class="linkProperty">UndoManager.history</a> as <a href="symbols/Transaction.html" class="linkConstructor">Transaction</a>s which hold lists of ChangedEvents.That is why ChangedEvent implements <a href="symbols/UndoManager.html#undo" class="linkMethod">undo</a> and <a href="symbols/UndoManager.html#redo" class="linkMethod">redo</a> of the change that it remembers.<p>When the ChangedEvent represents a change to a <a href="symbols/Model.html" class="linkConstructor">Model</a>, the value of #model is non-nulland the value of #diagram is meaningless.If the change is a structural change to the model,the value of #modelChange indicates the kind of change.Currently defined model changed event names include:<ul>  <li><b>"nodeDataArray"</b>, after the model's <a href="symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> is replaced, inserted into or removed from      (setting <a href="symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> or calling <a href="symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a> or <a href="symbols/Model.html#removeNodeData" class="linkMethod">Model.removeNodeData</a>)  </li>  <li><b>"nodeKey"</b>, after changing a node data's unique key (<a href="symbols/Model.html#setKeyForNodeData" class="linkMethod">Model.setKeyForNodeData</a>)</li>  <li><b>"nodeCategory"</b>, after changing a node data's category (<a href="symbols/Model.html#setCategoryForNodeData" class="linkMethod">Model.setCategoryForNodeData</a>)</li>  <li><b>"linkFromKey"</b>, after changing a link data's "from" node key (<a href="symbols/GraphLinksModel.html#setFromKeyForLinkData" class="linkMethod">GraphLinksModel.setFromKeyForLinkData</a>)</li>  <li><b>"linkToKey"</b>, after changing a link data's "to" node key (<a href="symbols/GraphLinksModel.html#setToKeyForLinkData" class="linkMethod">GraphLinksModel.setToKeyForLinkData</a>)</li>  <li><b>"linkFromPortId"</b>, after changing a link data's "from" port (<a href="symbols/GraphLinksModel.html#setFromPortIdForLinkData" class="linkMethod">GraphLinksModel.setFromPortIdForLinkData</a>)</li>  <li><b>"linkToPortId"</b>, after changing a link data's "to" port (<a href="symbols/GraphLinksModel.html#setToPortIdForLinkData" class="linkMethod">GraphLinksModel.setToPortIdForLinkData</a>)</li>  <li><b>"linkLabelKeys"</b>, after replacing, inserting into, or removing from a link data's array of keys to label nodes       (calling <a href="symbols/GraphLinksModel.html#setLabelKeysForLinkData" class="linkMethod">GraphLinksModel.setLabelKeysForLinkData</a>, <a href="symbols/GraphLinksModel.html#addLabelKeyForLinkData" class="linkMethod">GraphLinksModel.addLabelKeyForLinkData</a>,        or <a href="symbols/GraphLinksModel.html#removeLabelKeyForLinkData" class="linkMethod">GraphLinksModel.removeLabelKeyForLinkData</a>)  </li>  <li><b>"linkDataArray"</b>, after the model's <a href="symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">GraphLinksModel.linkDataArray</a> is replaced, inserted into or removed from      (setting <a href="symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">GraphLinksModel.linkDataArray</a> or calling <a href="symbols/GraphLinksModel.html#addLinkData" class="linkMethod">GraphLinksModel.addLinkData</a>       or <a href="symbols/GraphLinksModel.html#removeLinkData" class="linkMethod">GraphLinksModel.removeLinkData</a>)  </li>  <li><b>"nodeGroupKey"</b>, after changing a node data's key for a containing group data (<a href="symbols/GraphLinksModel.html#setGroupKeyForNodeData" class="linkMethod">GraphLinksModel.setGroupKeyForNodeData</a>)</li>  <li><b>"linkCategory"</b>, after changing a link data's category (<a href="symbols/GraphLinksModel.html#setCategoryForLinkData" class="linkMethod">GraphLinksModel.setCategoryForLinkData</a>)</li>  <li><b>"nodeParentKey"</b>, after changing a node data's "parent" node key (<a href="symbols/TreeModel.html#setParentKeyForNodeData" class="linkMethod">TreeModel.setParentKeyForNodeData</a>)</li>  <li><b>"parentLinkCategory"</b>, after changing a node data's "parent" link's category(<a href="symbols/TreeModel.html#setParentLinkCategoryForNodeData" class="linkMethod">TreeModel.setParentLinkCategoryForNodeData</a>)</li>  <li><b>"SourceChanged"</b>, for internal implementation use only</li></ul>The value of <a href="symbols/ChangedEvent.html#propertyName" class="linkProperty">ChangedEvent.propertyName</a> indicates the actual name of the property that was modified.<a href="symbols/ChangedEvent.html#modelChange" class="linkProperty">ChangedEvent.modelChange</a> is a non-empty string only when there is a known structural change to the model,not just the setting of some property on some object.<p>When the ChangedEvent represents a change to a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> or a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> within a diagram,the value of #diagram is non-null andthe values of #model and #modelChange are meaningless.</div></div>
			
			<div><h2><a href="symbols/CircularEdge.html" class="linkConstructor">CircularEdge</a></h2><p>This holds <a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>-specific information about <a href="symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xCircularEdge"><a class="morelink" onclick="hst('CircularEdge')">More...</a></span> <span class="details" id="CircularEdge"></span><div class="details" id="dCircularEdge"><p>This class inherits from <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>.</div></div>
			
			<div><h2><a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></h2><p>This layout positions nodes in a circular arrangement.<span class="nodetails" id="xCircularLayout"><a class="morelink" onclick="hst('CircularLayout')">More...</a></span> <span class="details" id="CircularLayout">There are several samples that use CircularLayout.The layout cannot guarantee that it provides optimal positioning of nodes when trying to minimize link crossings.<p class="boxrun">If you want to experiment interactively with most of the properties, try the <a href="../../samples/cLayout.html">Circular Layout</a> sample.</span><div class="details" id="dCircularLayout"><p>This layout makes use of a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of<a href="symbols/CircularVertex.html" class="linkConstructor">CircularVertex</a>es and <a href="symbols/CircularEdge.html" class="linkConstructor">CircularEdge</a>s that normallycorrespond to the <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s of the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.</div></div>
			
			<div><h2><a href="symbols/CircularVertex.html" class="linkConstructor">CircularVertex</a></h2><p>This holds <a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>-specific information about <a href="symbols/Node.html" class="linkConstructor">Node</a>s.<span class="nodetails" id="xCircularVertex"><a class="morelink" onclick="hst('CircularVertex')">More...</a></span> <span class="details" id="CircularVertex"></span><div class="details" id="dCircularVertex"><p>This class inherits from <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>.</div></div>
			
			<div><h2><a href="symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></h2><p>The ClickCreatingTool lets the user create a node by clicking where they want the new node to be.<span class="nodetails" id="xClickCreatingTool"><a class="morelink" onclick="hst('ClickCreatingTool')">More...</a></span> <span class="details" id="ClickCreatingTool">By default a double-click is required to start this tool;set #isDoubleClick to false if you want a single-click to create a node.</span><div class="details" id="dClickCreatingTool"><p>This tool is a standard mouse-up tool, the <a href="symbols/ToolManager.html#clickCreatingTool" class="linkProperty">ToolManager.clickCreatingTool</a>.However, it will not be able to start running unless you have set the#archetypeNodeData property to an object that can be copied and added to the diagram's model.<p>This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.This tool does conduct a transaction when inserting the new node.</div></div>
			
			<div><h2><a href="symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></h2><p>The ClickSelectingTool selects and deselects <a href="symbols/Part.html" class="linkConstructor">Part</a>s when there is a click.<span class="nodetails" id="xClickSelectingTool"><a class="morelink" onclick="hst('ClickSelectingTool')">More...</a></span> <span class="details" id="ClickSelectingTool">It does this by calling <a href="symbols/Tool.html#standardMouseSelect" class="linkMethod">Tool.standardMouseSelect</a>.It is also responsible for handling and dispatching click events on <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>sby calling <a href="symbols/Tool.html#standardMouseClick" class="linkMethod">Tool.standardMouseClick</a>.</span><div class="details" id="dClickSelectingTool"><p>Note that this tool avoids raising click events on objects that are in temporary layers.This is to prevent parts such as selection adornments from interfering with clicking on selected nodes or links.(Adornments are in the "Adornment" <a href="symbols/Layer.html" class="linkConstructor">Layer</a>, which <a href="symbols/Layer.html#isTemporary" class="linkProperty">Layer.isTemporary</a>.)However this means that if you add a <a href="symbols/GraphObject.html#click" class="linkProperty">GraphObject.click</a> event handler on a GraphObject in an Adornment,it will not be called.You can get it to be called by setting <a href="symbols/GraphObject.html#isActionable" class="linkProperty">GraphObject.isActionable</a> to true on that object in the adornment.<p>This tool is a standard mouse-up tool, the <a href="symbols/ToolManager.html#clickSelectingTool" class="linkProperty">ToolManager.clickSelectingTool</a>.<p>This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.This tool does not modify the model or conduct any transaction.<p>An example customization of this tool is shown in the <a href="../../extensions/TreeMap.html">Tree Map</a> sample,where the <a href="symbols/Tool.html#standardMouseSelect" class="linkMethod">Tool.standardMouseSelect</a> method is overridden to permit the user to cycle throughthe chain of containing groups, changing the selection on each click to the next containing group.</div></div>
			
			<div><h2><a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></h2><p>The <a href="symbols/Diagram.html#commandHandler" class="linkProperty">Diagram.commandHandler</a> implements variouscommands such as <a href="symbols/CommandHandler.html#deleteSelection" class="linkMethod">CommandHandler.deleteSelection</a> or <a href="symbols/CommandHandler.html#redo" class="linkMethod">CommandHandler.redo</a>.<span class="nodetails" id="xCommandHandler"><a class="morelink" onclick="hst('CommandHandler')">More...</a></span> <span class="details" id="CommandHandler">The CommandHandler includes keyboard event handling to interpretkey presses as commands.</span><div class="details" id="dCommandHandler"><p>CommandHandlers cannot be shared amongst multiple Diagrams.<p>You may define a CommandHandler subclass and override methods.However you must seriously consider calling the base method in order to get its default behavior.There may be situations where not calling the base method may cause subtle bugs,but that depends on the method.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call a base method.<p>There is an example custom CommandHandler in the extensions directory: <a href="../../extensions/DrawCommandHandler.js">DrawCommandHandler.js</a>,which provides alignment commands and additional behaviors for the arrow keys.<p class="boxread">For additional discussion, please read the <a href="../../intro/commands.html">Introduction page on Commands</a>.<h3>Keyboard Shortcuts</h3>The CommandHandler implements the following command bindings for keyboard input in #doKeyDown:<ul>  <li><code>Ctrl-X</code> & <code>Shift-Del</code> invoke #cutSelection</li>  <li><code>Ctrl-C</code> & <code>Ctrl-Insert</code> invoke #copySelection</li>  <li><code>Ctrl-V</code> & <code>Shift-Insert</code> invoke #pasteSelection</li>  <li><code>Del</code> & <code>Backspace</code> invoke #deleteSelection</li>  <li><code>Ctrl-A</code> invokes #selectAll</li>  <li><code>Ctrl-Z</code> & <code>Alt-Backspace</code> invoke <a href="symbols/UndoManager.html#undo" class="linkMethod">undo</a></li>  <li><code>Ctrl-Y</code> & <code>Alt-Shift-Backspace</code> invoke <a href="symbols/UndoManager.html#redo" class="linkMethod">redo</a></li>  <li><code>Up</code> & <code>Down</code> & <code>Left</code> & <code>Right</code> (arrow keys) call <a href="symbols/Diagram.html#scroll" class="linkMethod">Diagram.scroll</a></li>  <li><code>PageUp</code> & <code>PageDown</code> call <a href="symbols/Diagram.html#scroll" class="linkMethod">Diagram.scroll</a></li>  <li><code>Home</code> & <code>End</code> call <a href="symbols/Diagram.html#scroll" class="linkMethod">Diagram.scroll</a></li>  <li><code>Space</code> invokes #scrollToPart</li>  <li><code>Ctrl-- & Keypad--</code> (minus) invoke #decreaseZoom</li>  <li><code>Ctrl-+ & Keypad-+</code> (plus) invoke #increaseZoom</li>  <li><code>Ctrl-0</code> invokes #resetZoom</li>  <li><code>Shift-Z</code> invokes #zoomToFit; repeat to return to the original scale and position</li>  <li><code>Ctrl-G</code> invokes #groupSelection</li>  <li><code>Ctrl-Shift-G</code> invokes #ungroupSelection</li>  <li><code>F2</code> invokes #editTextBlock</li>  <li><code>Menu Key</code> invokes #showContextMenu</li>  <li><code>Esc</code> invokes #stopCommand</li></ul><p>On a Macintosh the Command key is used as the modifier instead of the Control key.</p><p>On touch devices there is a default context menu that shows many commonly-used commandswhen you hold a finger down on the diagram.</p></div></div>
			
			<div><h2><a href="symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></h2><p>The ContextMenuTool is used to create and show a context menu.<span class="nodetails" id="xContextMenuTool"><a class="morelink" onclick="hst('ContextMenuTool')">More...</a></span> <span class="details" id="ContextMenuTool">It automatically disables any browser context menu.</span><div class="details" id="dContextMenuTool"><p>Define context menus on individual <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s by setting <a href="symbols/GraphObject.html#contextMenu" class="linkProperty">GraphObject.contextMenu</a>.Define a context menu for the diagram background by setting <a href="symbols/Diagram.html#contextMenu" class="linkProperty">Diagram.contextMenu</a>.<p>This tool is a standard mouse-down tool, the <a href="symbols/ToolManager.html#contextMenuTool" class="linkProperty">ToolManager.contextMenuTool</a>.<p>This tool does not utilize any tool handles.This tool does not modify the model or conduct any transaction,although any code invoked by context menu commands might do so.<p>There are examples of customizing this tool in the<a href="../../samples/customContextMenu.html">Custom Context Menu</a> and<a href="../../samples/htmlLightBoxContextMenu.html">HTML LightBox Context Menu</a> samples.<p>If you want to programmatically show a context menu for a particular GraphObject or for thewhole diagram, call CommandHandler.showContextMenu.That command method is also invoked by the Menu key on the keyboard.<p>Normally this shows a context menu (if available) on a right-mouse-up event.If you want it to happen on a right-mouse-down event, you'll need to move this toolfrom the <a href="symbols/ToolManager.html#mouseUpTools" class="linkProperty">ToolManager.mouseUpTools</a> list to the <a href="symbols/ToolManager.html#mouseDownTools" class="linkProperty">ToolManager.mouseDownTools</a> list:<pre class="javascript">myDiagram.toolManager.mouseDownTools.add(myDiagram.toolManager.replaceTool("ContextMenu", null));</pre></div></div>
			
			<div><h2><a href="symbols/Diagram.html" class="linkConstructor">Diagram</a></h2><p>A Diagram is associated with an HTML DIV element.<span class="nodetails" id="xDiagram"><a class="morelink" onclick="hst('Diagram')">More...</a></span> <span class="details" id="Diagram"> Constructing a Diagram createsan HTML Canvas element which it places inside of the given DIV element, in addition to several helper DIVs.<b>GoJS</b> will manage the contents of this DIV -- you should not modify the contents of the DIV,although you may style the given DIV (background, border, etc) and position and size it as needed.</span><div class="details" id="dDiagram"><p>Minimal Diagram construction looks like this. HTML: <pre class="html">&lt;div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"&gt;&lt;/div&gt;</pre> <p> JavaScript: <pre class="javascript">var $ = go.GraphObject.make;  // for conciseness myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element               {                 initialContentAlignment: go.Spot.Center,  // center the content                 "undoManager.isEnabled": true  // enable undo & redo               });</pre><p>The diagram will draw onto an HTML Canvas element, created inside the Diagram DIV.<p>Each Diagram holds a set of <a href="symbols/Layer.html" class="linkConstructor">Layer</a>s each of which holds some number of <a href="symbols/Part.html" class="linkConstructor">Part</a>ssuch as <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s.Each <a href="symbols/Part.html" class="linkConstructor">Part</a> consists of <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s such as <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a>s and <a href="symbols/Shape.html" class="linkConstructor">Shape</a>sand <a href="symbols/Panel.html" class="linkConstructor">Panel</a>s holding yet more GraphObjects.<p>A Diagram and its Parts provide the visual representation of a <a href="symbols/Model.html" class="linkConstructor">Model</a> that holds JavaScriptdata objects for the nodes and the links.The model provides the way to recognize the relationships between the data.<p class="boxrun">Two Diagrams can display and manipulate the same Model. (<a href="../../samples/updateDemo.html">Example</a>)<p>A diagram will automatically create <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s corresponding to the model data.The diagram has a number of named templates it uses to create the actual parts:#nodeTemplateMap, #groupTemplateMap, and #linkTemplateMap.Each template may have some data <a href="symbols/Binding.html" class="linkConstructor">Binding</a>s that set the part's <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s' propertiesbased on the value of properties of the data.<p>A simple Node template and Model data (both nodes and links) may look like this:<pre class="javascript">var $ = go.GraphObject.make;  // for conciseness// define a simple Node templatemyDiagram.nodeTemplate =  $(go.Node, "Auto",  // the Shape will go around the TextBlock    $(go.Shape, "RoundedRectangle",      // Shape.fill is bound to Node.data.color      new go.Binding("fill", "color")),    $(go.TextBlock,      { margin: 3 },  // some room around the text      // TextBlock.text is bound to Node.data.key      new go.Binding("text", "key"))  );// create the model data that will be represented by Nodes and LinksmyDiagram.model = new go.GraphLinksModel([  { key: "Alpha", color: "lightblue" },  { key: "Beta", color: "orange" },  { key: "Gamma", color: "lightgreen" },  { key: "Delta", color: "pink" }],[  { from: "Alpha", to: "Beta" },  { from: "Alpha", to: "Gamma" },  { from: "Beta", to: "Beta" },  { from: "Gamma", to: "Delta" },  { from: "Delta", to: "Alpha" }]);</pre><p class="boxrun">The above code is used to make the <a href="../../samples/minimal.html">Minimal sample</a>, a simple example ofcreating a Diagram and setting its model.<p class="boxread">Read about models on the <a href="../../intro/usingModels.html">Using Models</a> page in the introduction.A diagram is responsible for scrolling (#position) and zooming (#scale) all of the parts that it shows.Each <a href="symbols/Part.html" class="linkConstructor">Part</a> occupies some area given by its <a href="symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>.<p>The union of all of the parts' bounds constitutes the #documentBounds.The document bounds determines the area that the diagram can be scrolled to.There are several properties that you can set, such as #initialContentAlignment,that control the initial size and position of the diagram contents.<p>At any later time you can also explicitly set the #position and/or #scale toget the appearance that you want.  But you may find it easier to call methods to get the desired effect.For example, if you want to make a particular Node be centered in the viewport,call either #centerRect or #scrollToRect with the Node's <a href="symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>,depending on whether or not you want the view to be scrolled if the node is already in view.<p class="boxread">Read in the Introduction about <a href="../../intro/viewport.html">Viewports</a>and the <a href="../../intro/initialView.html">Initial Viewport</a>.You can have the diagram perform automatic layouts of its nodes and links by setting#layout to an instance of the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> subclass of your choice.The default #layout is an instance of the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> base class that ignores links andonly positions <a href="symbols/Node.html" class="linkConstructor">Node</a>s that do not have a location.This default layout will allow you to programmatically position nodes (including by loadingfrom a database) and will also allow the user to manually position nodes using the <a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a>.<p>If you do supply a particular layout as the #layout, you can control which <a href="symbols/Part.html" class="linkConstructor">Part</a>s it operateson by setting <a href="symbols/Part.html#isLayoutPositioned" class="linkProperty">Part.isLayoutPositioned</a>.Normally, of course, it works on all top-level nodes and links.The layout is performed both after the model is first loaded as well as after any part is added or removedor changes visibility or size.You can disable the initial layout by setting <a href="symbols/Layout.html#isInitial" class="linkProperty">Layout.isInitial</a> to false.You can disable later automatic layouts by setting <a href="symbols/Layout.html#isOngoing" class="linkProperty">Layout.isOngoing</a> to false.<p class="boxread">See the <a href="../../intro/layouts.html">Layouts</a> page in the Introduction for a summary of layout behavior.<p>A diagram maintains a collection of selected parts, the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>.To select a Part you set its <a href="symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a> property to true.<p>There are many properties, named "allow...", that control what operations the usermay perform on the parts in the diagram.  These correspond to the same namedproperties on <a href="symbols/Layer.html" class="linkConstructor">Layer</a> that govern the behavior for those parts in a particular layer.Furthermore for some of these properties there are corresponding properties on<a href="symbols/Part.html" class="linkConstructor">Part</a>, named "...able", that govern the behavior for that individual part.For example, the #allowCopy property corresponds to <a href="symbols/Layer.html#allowCopy" class="linkProperty">Layer.allowCopy</a> andto the property <a href="symbols/Part.html#copyable" class="linkProperty">Part.copyable</a>.The <a href="symbols/Part.html#canCopy" class="linkMethod">Part.canCopy</a> predicate is false if any of these properties is false.<p class="boxread">See the <a href="../../intro/permissions.html">Permissions</a> page for a more thorough discussion.<p>The #commandHandler implements various standard commands,such as the <a href="symbols/CommandHandler.html#deleteSelection" class="linkMethod">CommandHandler.deleteSelection</a> method and the<a href="symbols/CommandHandler.html#canDeleteSelection" class="linkMethod">CommandHandler.canDeleteSelection</a> predicate.<p class="boxread">See the <a href="../../intro/commands.html">Commands</a> page for a listing of keyboard commands andthe use of commands in general.<p>The diagram supports modular behavior for mouse events by implementing "tools".All mouse and keyboard events are represented by <a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a>s and redirectedto the #currentTool.The default tool is an instance of <a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a> which keeps three lists of mode-less tools:<a href="symbols/ToolManager.html#mouseDownTools" class="linkProperty">ToolManager.mouseDownTools</a>, <a href="symbols/ToolManager.html#mouseMoveTools" class="linkProperty">ToolManager.mouseMoveTools</a>, and <a href="symbols/ToolManager.html#mouseUpTools" class="linkProperty">ToolManager.mouseUpTools</a>.The ToolManager searches these lists when a mouse event happens to find the first tool that can run.It then makes that tool the new #currentTool, where it can continue to process input events.When the tool is done, it stops itself, causing the #defaultTool to be the new #currentTool.<p>Mouse-down tools include:<ul>  <li><a href="symbols/ToolManager.html#actionTool" class="linkProperty">ToolManager.actionTool</a>, to support objects like "buttons"</li>  <li><a href="symbols/ToolManager.html#relinkingTool" class="linkProperty">ToolManager.relinkingTool</a>, to reconnect an existing link</li>  <li><a href="symbols/ToolManager.html#linkReshapingTool" class="linkProperty">ToolManager.linkReshapingTool</a>, to modify the route of an existing link</li>  <li><a href="symbols/ToolManager.html#resizingTool" class="linkProperty">ToolManager.resizingTool</a>, to change the size of an object</li>  <li><a href="symbols/ToolManager.html#rotatingTool" class="linkProperty">ToolManager.rotatingTool</a>, to change the angle of an object</li></ul>Mouse-move tools include:<ul>  <li><a href="symbols/ToolManager.html#linkingTool" class="linkProperty">ToolManager.linkingTool</a>, to draw a new link</li>  <li><a href="symbols/ToolManager.html#draggingTool" class="linkProperty">ToolManager.draggingTool</a>, to move or copy the selection</li>  <li><a href="symbols/ToolManager.html#dragSelectingTool" class="linkProperty">ToolManager.dragSelectingTool</a>, to select parts within a rectangular area</li>  <li><a href="symbols/ToolManager.html#panningTool" class="linkProperty">ToolManager.panningTool</a>, to pan the diagram</li></ul>Mouse-up tools include:<ul>  <li><a href="symbols/ToolManager.html#contextMenuTool" class="linkProperty">ToolManager.contextMenuTool</a>, to manage context menus</li>  <li><a href="symbols/ToolManager.html#textEditingTool" class="linkProperty">ToolManager.textEditingTool</a>, to support in-place text editing</li>  <li><a href="symbols/ToolManager.html#clickCreatingTool" class="linkProperty">ToolManager.clickCreatingTool</a>, to create new parts where the user clicks</li>  <li><a href="symbols/ToolManager.html#clickSelectingTool" class="linkProperty">ToolManager.clickSelectingTool</a>, to select parts</li><p></ul><p>You can also run a tool in a modal fashion by explicitly setting #currentTool.That tool will keep running until some code replaces the #currentTool/This normally happens when the current tool calls <a href="symbols/Tool.html#stopTool" class="linkMethod">Tool.stopTool</a>, such as on a mouse-up event.<p class="boxread">See the <a href="../../intro/tools.html">Tools</a> page for a listing of predefined tools and how they operate.<p>A diagram raises various <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a>s when interesting things happen that may have affected the whole diagram.See the documentation for <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> for a complete listing.</div></div>
			
			<div><h2><a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></h2><p>A DiagramEvent represents a more abstract event than an <a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a>.<span class="nodetails" id="xDiagramEvent"><a class="morelink" onclick="hst('DiagramEvent')">More...</a></span> <span class="details" id="DiagramEvent">They are raised on the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> class.One can receive such events by registering a DiagramEvent listener on a Diagramby calling <a href="symbols/Diagram.html#addDiagramListener" class="linkMethod">Diagram.addDiagramListener</a>.The listener function, when called, will be passed an instance of a <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a>.Use the #name property to decide what kind of diagram event it is.The #diagram property refers to the Diagram, and you can get additional informationfrom that, such as the <a href="symbols/Diagram.html#lastInput" class="linkProperty">Diagram.lastInput</a>, which in turn provides informationsuch as <a href="symbols/InputEvent.html#documentPoint" class="linkProperty">InputEvent.documentPoint</a> that may be relevant for that kind of DiagramEvent.</span><div class="details" id="dDiagramEvent"><p>The #subject and #parameter properties optionally provide additional informationabout the diagram event.  The subject could be a collection of <a href="symbols/Part.html" class="linkConstructor">Part</a>s or it could bean individual object such as a <a href="symbols/Link.html" class="linkConstructor">Link</a> or a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> within a <a href="symbols/Node.html" class="linkConstructor">Node</a>.Everything depends on the kind of diagram event that it is.<p>Some DiagramEvents such as "ObjectSingleClicked" or "BackgroundDoubleClicked" are normallyassociated with <a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a>s.Some DiagramEvents such as "SelectionMoved" or "PartRotated" are associated with theresults of <a href="symbols/Tool.html" class="linkConstructor">Tool</a>-handled gestures or <a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a> actions.Some DiagramEvents are not necessarily associated with any input events at all,such as "ViewportBoundsChanged", which can happen due to programmaticchanges to the <a href="symbols/Diagram.html#position" class="linkProperty">Diagram.position</a> and <a href="symbols/Diagram.html#scale" class="linkProperty">Diagram.scale</a> properties.<p>DiagramEvents that occur during a transaction may be called before the state of the whole diagram has settled down.This often means that such events occur before a layout, so nodes may not have their final positions,links may not have their final routes, and the <a>Diagram.documentBounds</a> and <a>Diagram.viewportBounds</a>may not yet have been updated.Such events may make additional changes to the diagram, which may in turn result in additional side-effects.<p>DiagramEvents that occur outside of a transaction require you to start and commit a transaction around any side-effects that you want to do.However, some DiagramEvents do not allow you to make any changes to the Diagram or Model.<p>Currently defined diagram event names include:<ul>  <li><b>"AnimationStarting"</b>, an animation is about to start;<br/>      do not modify the Diagram or its Model in the event listener.</li>  <li><b>"AnimationFinished"</b>, an animation just completed;<br/>      do not modify the Diagram or its Model in the event listener.</li>  <li><b>"BackgroundSingleClicked"</b>, a click that was not on any Part;<br/>      if you make any changes, do so within a transaction.</li>  <li><b>"BackgroundDoubleClicked"</b>, a double-click that was not on any Part;<br/>      if you make any changes, do so within a transaction.</li>  <li><b>"BackgroundContextClicked"</b>, a context-click that was not on any Part;<br/>      if you make any changes, do so within a transaction.</li>  <li><b>"ChangingSelection"</b>, an operation is about to change the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a> collection;<br/>      do not make any changes to the selection or the diagram in the event listener.</li>  <li><b>"ChangedSelection"</b>, an operation has just changed the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a> collection;<br/>      do not make any changes to the selection or the diagram in the event listener.</li>  <li><b>"ClipboardChanged"</b>, Parts have been copied to the clipboard by <a href="symbols/CommandHandler.html#copySelection" class="linkMethod">CommandHandler.copySelection</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Part.html" class="linkConstructor">Part</a>s;<br/>      if you make any changes, do so within a transaction.</li>  <li><b>"ClipboardPasted"</b>, Parts have been copied from the clipboard into the Diagram by <a href="symbols/CommandHandler.html#pasteSelection" class="linkMethod">CommandHandler.pasteSelection</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>,<br/>      and this is called within a transaction.</li>  <li><b>"DocumentBoundsChanged"</b>, the area of the diagram's Parts, <a href="symbols/Diagram.html#documentBounds" class="linkProperty">Diagram.documentBounds</a>, has changed;<br/>      the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the old <a href="symbols/Rect.html" class="linkConstructor">Rect</a></li>  <li><b>"ExternalObjectsDropped"</b>, Parts have been copied into the Diagram by drag-and-drop from outside of the Diagram;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the set of <a href="symbols/Part.html" class="linkConstructor">Part</a>s that were dropped (which is also the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>),      the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the source <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>,      and this is called within a transaction.</li>  <li><b>"InitialLayoutCompleted"</b>, the whole diagram layout has updated for the first time since a major change to the Diagram, such as replacing the Model;<br/>      if you make any changes, you do not need to perform a transaction.</li>  <li><b>"LayoutCompleted"</b>, the whole diagram layout has just been updated;<br/>      if you make any changes, you do not need to perform a transaction.</li>  <li><b>"LinkDrawn"</b>, the user has just created a new Link using <a href="symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the new <a href="symbols/Link.html" class="linkConstructor">Link</a>,<br/>      and this is called within a transaction.</li>  <li><b>"LinkRelinked"</b>, the user has just reconnected an existing Link using <a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the modified <a href="symbols/Link.html" class="linkConstructor">Link</a>,<br/>      the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> port that the link was disconnected from,<br/>      and this is called within a transaction.</li>  <li><b>"LinkReshaped"</b>, the user has just rerouted an existing Link using <a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the modified <a href="symbols/Link.html" class="linkConstructor">Link</a>,<br/>      the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the List of Points of the link's original route,      and this is called within a transaction.</li>  <li><b>"Modified"</b>, the <a href="symbols/Diagram.html#isModified" class="linkProperty">Diagram.isModified</a> property has been set to a new value;<br/>      do not modify the Diagram or its Model in the event listener.</li>  <li><b>"ObjectSingleClicked"</b>, a click that occurred on a GraphObject;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>;<br/>      if you make any changes, do so within a transaction.</li>  <li><b>"ObjectDoubleClicked"</b>, a double-click that occurred on a GraphObject;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>;<br/>      if you make any changes, do so within a transaction.</li>  <li><b>"ObjectContextClicked"</b>, a context-click that occurred on a GraphObject;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>;<br/>      if you make any changes, do so within a transaction.</li>  <li><b>"PartCreated"</b>, the user inserted a new Part by <a href="symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the new <a href="symbols/Part.html" class="linkConstructor">Part</a>,<br/>      and this is called within a transaction.</li>  <li><b>"PartResized"</b>, the user has changed the size of a GraphObject by <a href="symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>,<br/>      the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the original Size,<br/>      and this is called within a transaction.</li>  <li><b>"PartRotated"</b>, the user has changed the angle of a GraphObject by <a href="symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>,<br/>      the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the original angle in degrees,<br/>      and this is called within a transaction.</li>  <li><b>"SelectionMoved"</b>, the user has moved selected Parts by <a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the moved <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>,<br/>      and this is called within a transaction.</li>  <li><b>"SelectionCopied"</b>, the user has copied selected Parts by <a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the newly copied <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>,<br/>      and this is called within a transaction.</li>  <li><b>"SelectionDeleting"</b>, the user is about to delete selected Parts by <a href="symbols/CommandHandler.html#deleteSelection" class="linkMethod">CommandHandler.deleteSelection</a>;<br/>      you can cancel the deletion by setting <a href="symbols/DiagramEvent.html#cancel" class="linkProperty">DiagramEvent.cancel</a> to true;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a> collection of Parts to be deleted,<br/>      do not make any changes to the selection or the diagram.</li>  <li><b>"SelectionDeleted"</b>, the user has deleted selected Parts by <a href="symbols/CommandHandler.html#deleteSelection" class="linkMethod">CommandHandler.deleteSelection</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Part.html" class="linkConstructor">Part</a>s that were deleted,<br/>      and this is called within a transaction.</li>  <li><b>"SelectionGrouped"</b>, the user has made a new Group out of the selected Parts by <a href="symbols/CommandHandler.html#groupSelection" class="linkMethod">CommandHandler.groupSelection</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the new <a href="symbols/Group.html" class="linkConstructor">Group</a>,<br/>      and this is called within a transaction.</li>  <li><b>"SelectionUngrouped"</b>, the user has removed a selected Group but kept its members by <a href="symbols/CommandHandler.html#ungroupSelection" class="linkMethod">CommandHandler.ungroupSelection</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Group.html" class="linkConstructor">Group</a>s that were ungrouped,<br/>      the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the collection of former member <a href="symbols/Part.html" class="linkConstructor">Part</a>s that were ungrouped,<br/>      and this is called within a transaction.</li>  <li><b>"SubGraphCollapsed"</b>, the user has collapsed selected Groups by <a href="symbols/CommandHandler.html#collapseSubGraph" class="linkMethod">CommandHandler.collapseSubGraph</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Group.html" class="linkConstructor">Group</a>s that were collapsed,<br/>      and this is called within a transaction.</li>  <li><b>"SubGraphExpanded"</b>, the user has expanded selected Groups by <a href="symbols/CommandHandler.html#expandSubGraph" class="linkMethod">CommandHandler.expandSubGraph</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Group.html" class="linkConstructor">Group</a>s that were expanded,<br/>      and this is called within a transaction.</li>  <li><b>"TextEdited"</b>, the user has changed the string value of a TextBlock by <a href="symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the edited <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a>,<br/>      the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the original string,<br/>      and this is called within a transaction.</li>  <li><b>"TreeCollapsed"</b>, the user has collapsed selected Nodes with subtrees by <a href="symbols/CommandHandler.html#collapseTree" class="linkMethod">CommandHandler.collapseTree</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Node.html" class="linkConstructor">Node</a>s that were collapsed,<br/>      and this is called within a transaction.</li>  <li><b>"TreeExpanded"</b>, the user has expanded selected Nodes with subtrees by <a href="symbols/CommandHandler.html#expandTree" class="linkMethod">CommandHandler.expandTree</a>;<br/>      the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Node.html" class="linkConstructor">Node</a>s that were expanded,<br/>      and this is called within a transaction.</li>  <li><b>"ViewportBoundsChanged"</b>, the visible area of the Diagram, <a href="symbols/Diagram.html#viewportBounds" class="linkProperty">Diagram.viewportBounds</a>, has changed;<br/>      the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the old <a href="symbols/Rect.html" class="linkConstructor">Rect</a>.</li></ul></div></div>
			
			<div><h2><a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></h2><p>The DraggingTool is used to move or copy selected parts with the mouse.<span class="nodetails" id="xDraggingTool"><a class="morelink" onclick="hst('DraggingTool')">More...</a></span> <span class="details" id="DraggingTool">This sets the <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> property; you may want to save the location to the modelby using a TwoWay <a href="symbols/Binding.html" class="linkConstructor">Binding</a> on the "location" property in your Parts/Nodes/Groups templates.</span><div class="details" id="dDraggingTool"><p>Dragging the selection moves parts for which <a href="symbols/Part.html#canMove" class="linkMethod">Part.canMove</a> is true.If the user holds down the Control key (Option key on Mac), this tool will make a copy of the parts being dragged,for those parts for which <a href="symbols/Part.html#canCopy" class="linkMethod">Part.canCopy</a> is true.<p>When the drag starts it calls #computeEffectiveCollection to find the actual collectionof <a href="symbols/Part.html" class="linkConstructor">Part</a>s to be dragged.Normally this collection includes not only the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>, but also parts that belongto those selected parts, such as members of groups.If #dragsTree is true, the effective collection also includes all of the nodes and links thatconstitute the subtree starting from selected nodes.The result of #computeEffectiveCollection is not a <a href="symbols/Set.html" class="linkConstructor">Set</a> but a <a href="symbols/Map.html" class="linkConstructor">Map</a>which remembers the original <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> for all of the dragged parts.This map is saved as the value of #draggedParts.<p>During the drag if the user holds down the Control/Option key this tool makes a copy of the #draggedPartsand proceeds to drag it around.(It only copies the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>, not the whole effective collection,if #copiesEffectiveCollection is false.)The collection of copied parts is held by #copiedParts.It too is a <a href="symbols/Map.html" class="linkConstructor">Map</a> remembering the original locations of the parts.#copiedParts will be null when this tool is moving (not copying) at the moment.<p>Each Part's movement is limited by the #computeMove method.By default it limits the <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> to be within the bounds given by <a href="symbols/Part.html#minLocation" class="linkProperty">Part.minLocation</a> and <a href="symbols/Part.html#maxLocation" class="linkProperty">Part.maxLocation</a>.(Those default to minus Infinity to plus Infinity.)As a further convenience, the value of NaN in minLocation and maxLocation cause #computeMove to use thepart's current location.So, for example, an easy way to declare that the user may only drag a node horizontally is to just set:<pre>$(go.Node,  . . .  { minLocation: new go.Point(-Infinity, NaN), maxLocation: new go.Point(Infinity, NaN) },  . . .)</pre><p>If you set #isGridSnapEnabled to true, dragged or copied parts will be snapped to points on a grid.The snapping occurs continuously during a drag unless you set #isGridSnapRealtime to false.Normally the grid points come from the <a href="symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>, even if that grid is not <a href="symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a>.However you can override those grid's properties for the snapping grid cell size and offsetby setting the properties here: #gridSnapCellSize and #gridSnapOrigin.This computes the point to snap to for each dragged part.The resulting point is used as the new <a href="symbols/Part.html#location" class="linkProperty">Part.location</a>.<p>For the most general control over where a part may be dragged, either set the <a href="symbols/Part.html#dragComputation" class="linkProperty">Part.dragComputation</a> propertyor override #computeMove.For the common case of wanting to keep member nodes within the <a href="symbols/Group.html" class="linkConstructor">Group</a> that they are members of,you can do something like:<pre> // this is a Part.dragComputation function for limiting where a Node may be dragged function stayInGroup(part, pt, gridpt) {   // don't constrain top-level nodes   var grp = part.containingGroup;   if (grp === null) return pt;   // try to stay within the background Shape of the Group   var back = grp.findObject("SHAPE");   if (back === null) return pt;   // allow dragging a Node out of a Group if the Shift key is down   //if (part.diagram.lastInput.shift) return pt;   var p1 = back.getDocumentPoint(go.Spot.TopLeft);   var p2 = back.getDocumentPoint(go.Spot.BottomRight);   var b = part.actualBounds;   var loc = part.location;   // find the padding inside the group's placeholder that is around the member parts   var m = (grp.placeholder !== null ? grp.placeholder.padding : new go.Margin(0));   // now limit the location appropriately   var x = Math.max(p1.x + m.left, Math.min(pt.x, p2.x - m.right - b.width - 1)) + (loc.x-b.x);   var y = Math.max(p1.y + m.top, Math.min(pt.y, p2.y - m.bottom - b.height - 1)) + (loc.y-b.y);   return new go.Point(x, y); }</pre>Note that this expects there to be a "SHAPE" object within the Group's visual tree that delimitswhere the part may be dragged within the group.This also expects that <a href="symbols/Group.html#computesBoundsIncludingLinks" class="linkProperty">Group.computesBoundsIncludingLinks</a> is false.Then in your node template(s), just set:<pre>$(go.Node,  . . .,  { dragComputation: stayInGroup },  . . .)</pre><p>This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.If the drag is successful, it raises the "SelectionMoved" or "SelectionCopied" <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a>and produces a "Move" or a "Copy" transaction.<p>If you want to programmatically start a new user mouse-gesture to drag a particular existing node,you can set the #currentPart property and then start and activate the tool.<pre>  var tool = myDiagram.toolManager.draggingTool;  tool.currentPart = ...;  myDiagram.currentTool = tool;  tool.doActivate();</pre></div></div>
			
			<div><h2><a href="symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></h2><p>The DragSelectingTool lets the user select multiple parts within a rectangular area drawn by the user.<span class="nodetails" id="xDragSelectingTool"><a class="morelink" onclick="hst('DragSelectingTool')">More...</a></span> <span class="details" id="DragSelectingTool">There is a temporary part, the #box,that shows the current area encompassed between the mouse-downpoint and the current mouse point.The default drag selection box is a magenta rectangle.You can change the #box to customize its appearance -- see its documentation for an example.</span><div class="details" id="dDragSelectingTool"><p>This tool is a standard mouse-move tool, the <a href="symbols/ToolManager.html#dragSelectingTool" class="linkProperty">ToolManager.dragSelectingTool</a>.However this cannot start running unless there has been a motionless delayafter the mouse-down event of at least #delay milliseconds.<p>This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles,but it does temporarily add the #box part to the diagram.This tool does not modify the model or conduct any transaction.<p>Selection occurs on a mouse-up when it calls #selectInRectwith the value of #computeBoxBounds.Selectable parts are selected when their bounds fall entirely within the rectangle,unless #isPartialInclusion is set to true.<p>If you implement your own drag-in-the-background-to-do-something tool, you may need to disablethis tool or insert your new tool in the <a href="symbols/ToolManager.html#mouseMoveTools" class="linkProperty">ToolManager.mouseMoveTools</a> list before this tool,in order for your tool to run.  There are examples of such tools defined in the extensions directory:<a href="../../extensions/RealtimeDragSelecting.html">Realtime Drag Selecting Tool</a>,<a href="../../extensions/DragCreating.html">Drag Creating Tool</a>, and<a href="../../extensions/DragZooming.html">Drag Zooming Tool</a>.</div></div>
			
			<div><h2><a href="symbols/ForceDirectedEdge.html" class="linkConstructor">ForceDirectedEdge</a></h2><p>This holds <a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>-specific information about <a href="symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xForceDirectedEdge"><a class="morelink" onclick="hst('ForceDirectedEdge')">More...</a></span> <span class="details" id="ForceDirectedEdge"></span><div class="details" id="dForceDirectedEdge"><p>This class inherits from <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>.</div></div>
			
			<div><h2><a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></h2><p>Force-directed layout treats the graph as if it were a system of physicalbodies with forces acting on them and between them.<span class="nodetails" id="xForceDirectedLayout"><a class="morelink" onclick="hst('ForceDirectedLayout')">More...</a></span> <span class="details" id="ForceDirectedLayout">The algorithm seeks a configuration of the bodies with locally minimal energy,i.e. vertex positions such that the sum of the forces on each vertex is zero.There are many samples that use ForceDirectedLayout.The layout cannot guarantee that it provides optimal positioning of nodes.Nodes will normally not overlap each other, but when there is a dense interconnectivity overlaps might not be avoidable.<p class="boxrun">If you want to experiment interactively with most of the properties, try the <a href="../../samples/fdLayout.html">Force Directed Layout</a> sample.</span><div class="details" id="dForceDirectedLayout"><p>This layout makes use of a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of<a href="symbols/ForceDirectedVertex.html" class="linkConstructor">ForceDirectedVertex</a>es and <a href="symbols/ForceDirectedEdge.html" class="linkConstructor">ForceDirectedEdge</a>s that normallycorrespond to the <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s of the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.</div></div>
			
			<div><h2><a href="symbols/ForceDirectedVertex.html" class="linkConstructor">ForceDirectedVertex</a></h2><p>This holds <a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>-specific information about <a href="symbols/Node.html" class="linkConstructor">Node</a>s.<span class="nodetails" id="xForceDirectedVertex"><a class="morelink" onclick="hst('ForceDirectedVertex')">More...</a></span> <span class="details" id="ForceDirectedVertex"></span><div class="details" id="dForceDirectedVertex"><p>This class inherits from <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>.</div></div>
			
			<div><h2><a href="symbols/Geometry.html" class="linkConstructor">Geometry</a></h2><p>The Geometry class is used to define the "shape" of a <a href="symbols/Shape.html" class="linkConstructor">Shape</a>.<span class="nodetails" id="xGeometry"><a class="morelink" onclick="hst('Geometry')">More...</a></span> <span class="details" id="Geometry">A Geometry can be simple straight lines, rectangles, or ellipses.A Geometry can also be an arbitrarily complex path, consisting of a list of <a href="symbols/PathFigure.html" class="linkConstructor">PathFigure</a>s.</span><div class="details" id="dGeometry"><p>A Geometry must not be modified once it has been used by a <a href="symbols/Shape.html" class="linkConstructor">Shape</a>.However, a Geometry may be shared by multiple Shapes.<p>It is commonplace to create Geometries using geometry path string syntax:<a href=../../intro/geometry.html">Geometry Path Strings</a>.However it is much more efficient to create Geometries programmatically.One way to do that is illustrated by several of the samples that evaluate JavaScript such as:<pre>new go.Geometry()    .add(new go.PathFigure(p.x, p.y)         .add(new go.PathSegment(go.PathSegment.Arc, -sweep/2, sweep, 0, 0, radius+layerThickness, radius+layerThickness))         .add(new go.PathSegment(go.PathSegment.Line, q.x, q.y))         .add(new go.PathSegment(go.PathSegment.Arc, sweep/2, -sweep, 0, 0, radius, radius).close()));</pre></div></div>
			
			<div><h2><a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></h2><p>GraphLinksModels support links between nodes and grouping nodes and links into subgraphs.<span class="nodetails" id="xGraphLinksModel"><a class="morelink" onclick="hst('GraphLinksModel')">More...</a></span> <span class="details" id="GraphLinksModel">GraphLinksModels hold node data and link data in separate arrays.Node data is normally represented in a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> by instances of <a href="symbols/Node.html" class="linkConstructor">Node</a>,but they could be represented by simple <a href="symbols/Part.html" class="linkConstructor">Part</a>s or by <a href="symbols/Group.html" class="linkConstructor">Group</a>s.Link data should be represented by instances of <a href="symbols/Link.html" class="linkConstructor">Link</a>.</span><div class="details" id="dGraphLinksModel"><p>Each link data object is assumed to have two values, one referring to the node that thelink is coming from and one that the link is going to.The #linkFromKeyProperty property names the property on the link data whose valueis the key of the "from" node.The #linkToKeyProperty property names the property on the link data whose valueis the key of the "to" node.The default values for these properties are "from" and "to" respectively.<p>For example, one can define a graph consisting of two nodes with one link connecting them:<pre class="javascript"> model.nodeDataArray = [   { key: "Alpha" },   { key: "Beta" } ]; model.linkDataArray = [   { from: "Alpha", to: "Beta" } ];</pre><p>If you want to have subgraphs in your diagram, where a group node contains some number of nodes and links,you need to declare that some node data actually represent groups,and you need to provide a reference from a member node data to its containing group node data.The #nodeIsGroupProperty property names the property on a node data that is trueif that node data represents a group.The #nodeGroupKeyProperty property names the property on a node data whose valueis the key of the containing group's node data.The default values for these properties are "isGroup" and "group" respectively.<p>For example, one can define a graph consisting of one group containing a subgraph oftwo nodes connected by a link, with a second link from that group to a third nodethat is not a member of that group:<pre> model.nodeDataArray = [   { key: "Group1", isGroup: true},   { key: "Alpha", group: "Group1" },   { key: "Beta", group: "Group1" },   { key: "Gamma" } ]; model.linkDataArray = [   { from: "Alpha", to: "Beta" },   { from: "Group1", to: "Gamma" } ];</pre><p>GraphLinksModels also support distinguishing the "port" element of a node to whicha link can connect, at either end of the link.This identification is a string that names the "port" element in the node.However, you need to set the #linkFromPortIdProperty and/or#linkToPortIdProperty properties before the model is able toget the "port id" information from the link data.<p>For example, one can define a graph consisting of a "subtraction" node and two inputs and one output.The "subtraction" node has two distinct inputs called "subtrahend" and "minuend";the output is called "difference".<pre> model.linkFromPortIdProperty = "fromPort";  // necessary to remember portIds model.linkToPortIdProperty = "toPort"; model.nodeDataArray = [   { key: 1, constant: 5 },  // a constant input node   { key: 2, constant: 2 },  // another constant node   { key: 3, operation: "subtract" },   { key: 4, value: 3 }  // the output node ]; model.linkDataArray = [   { from: 1, to: 3, toPort: "subtrahend" },   { from: 2, to: 3, toPort: "minuend" },   { from: 3, to: 4, fromPort: "difference" } ];</pre>In this case links connected to node 3 (which is the subtraction operation)are distinguished by port id.The connections to the other nodes do not have any port identification,presumably because there is only one port on those nodes, representing the node value.<p>Note that there is no requirement that the link data objects have any kind of unique identifier, unlike for node data.There is no expectation that there be references to link data in the model, so there is no need for such an identifier.When there are multiple links connecting two ports, the only way to distinguish the links in the modelis by reference to the particular link data object.This is why there are two methods on the Diagram class for Nodes, <a href="symbols/Diagram.html#findNodeForKey" class="linkMethod">Diagram.findNodeForKey</a> and <a href="symbols/Diagram.html#findNodeForData" class="linkMethod">Diagram.findNodeForData</a>,but there is only the one method for Links, <a href="symbols/Diagram.html#findLinkForData" class="linkMethod">Diagram.findLinkForData</a>.<p>However you may wish to have the model maintain string or number identifiers on the link data just as all models do for node data.To get that behavior, so that you can call #findLinkDataForKey, you need to set #linkKeyProperty to be a non-empty string.Just as with the assignment of node keys, you can customize the assignment of link keys by setting#makeUniqueLinkKeyFunction to a function that returns a unique identifier.<p>This model does not support the modification of whether a node data object is a group.<p>This model cannot detect the modification of the #linkDataArray arrayor the modification of any link data object.If you want to add or remove link data from the #linkDataArray,call the #addLinkData or #removeLinkData methods.If you want to modify the node a link connects to, call the#setFromKeyForLinkData and/or #setToKeyForLinkData methods.If you want to change the membership of a node data in a group,call the #setGroupKeyForNodeData method.</div></div>
			
			<div><h2><a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a></h2><p>This is the abstract base class for all graphical objects.<span class="nodetails" id="xGraphObject"><a class="morelink" onclick="hst('GraphObject')">More...</a></span> <span class="details" id="GraphObject">Classes inheriting from GraphObject include:<a href="symbols/Shape.html" class="linkConstructor">Shape</a>, <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a>, <a href="symbols/Picture.html" class="linkConstructor">Picture</a>, and <a href="symbols/Panel.html" class="linkConstructor">Panel</a>.From the Panel class the <a href="symbols/Part.html" class="linkConstructor">Part</a> class is derived, from which the<a href="symbols/Node.html" class="linkConstructor">Node</a> and <a href="symbols/Link.html" class="linkConstructor">Link</a> classes derive.</span><div class="details" id="dGraphObject"><p>It is very common to make use of the static function <a href="symbols/GraphObject.html#.make" class="linkStatic">GraphObject.make</a> in order to build upa visual tree of GraphObjects.  You can see many examples of this throughout theIntroduction, starting at <a href="../../intro/buildingObjects.html">Building Objects</a>,and the Samples, starting with <a href="../../samples/minimal.html">Minimal Sample</a>.<p>Since GraphObject is an abstract class, programmers do not create GraphObjects themselves,but this class defines many properties used by all kinds of GraphObjects.<p>The only visual properties on GraphObject are #background and #areaBackground.However one can control whether the GraphObject is drawn at all by setting #visible,or by setting #opacity to zero if you still want the GraphObject to occupy space.Also, if you want to control whether any mouse or touch events "see" the GraphObject,you can set #pickable to false.<p>For more information about specifying how things get drawn, see the properties on the<a href="symbols/Shape.html" class="linkConstructor">Shape</a>, <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a>, and <a href="symbols/Picture.html" class="linkConstructor">Picture</a> classes.<h3>GraphObject Sizing</h3><p>GraphObject defines most of the properties that cause objects to size themselves differently.The most prominent ones include:<ul><li>The #desiredSize, #minSize, and #maxSize properties are used toexplicitly set or limit the size of visual elements. #width and #height areconvenience properties that set the #desiredSize width and height, respectively.</li><li>The #angle and #scale properties are used to transform visual elements.</li><li>The #stretch property determines how a GraphObject will fill its visual space,contextually granted to it by its containing <a href="symbols/Panel.html" class="linkConstructor">Panel</a>. Top-level (<a href="symbols/Part.html" class="linkConstructor">Part</a>)GraphObjects are not affected by this property because they are always granted infinite space.</li></ul><p>All GraphObjects in a Diagram are measured and then arranged by their containing <a href="symbols/Panel.html" class="linkConstructor">Panel</a>s in a tree-like fashion.After measuring and arranging, a GraphObject will have valid values for the read-onlyproperties #naturalBounds, #measuredBounds, and #actualBounds.<p><ul><li>The #naturalBounds of a GraphObject describe its local size,without any transformations (#scale, #angle) affecting it.</li><li>The #measuredBounds of a GraphObject describe its size relative to its containing Panel.</li><li>The #actualBounds of a GraphObject describe its position and given size inside of its panel.This size may be smaller than #measuredBounds, for instance if a GraphObject with a large #desiredSizeis placed in a <a href="symbols/Panel.html" class="linkConstructor">Panel</a> of a smaller #desiredSize. Smaller #actualBounds than #measuredBoundstypically means an object will be cropped.</li></ul><p class="boxread">See <a href="../../intro/sizing.html">the Introduction page on sizing</a>for usage information and examples.<h3>GraphObject Size and Position within Panel</h3>Several GraphObject properties guide the containing <a href="symbols/Panel.html" class="linkConstructor">Panel</a> for how to size and position the object within the panel.<ul><li>The #alignment specifies where the object should be relative to some area of the panel.For example, an alignment value of <a href="symbols/Spot.html#BottomRight" class="linkConstant">Spot.BottomRight</a> means that the GraphObject should be at the bottom-right corner of the panel.</li><li>The #alignmentFocus specifies precisely which point of the GraphObject should be aligned at the #alignment spot.</li><li>The #column and #row properties are only used by <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> panels, to indicate where the GraphObject should be.</li><li>The #columnSpan and #rowSpan properties tell the <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> panel how large the GraphObject should be.</li><li>The #isPanelMain property indicates to some kinds of <a href="symbols/Panel.html" class="linkConstructor">Panel</a>s that the GraphObject is the "primary" object that other panel children should be measured with or positioned in.</li><li>The #margin property tells the containing <a href="symbols/Panel.html" class="linkConstructor">Panel</a> how much extra space to put around this GraphObject.</li><li>The #position property is used to determine the relative position of GraphObjects when they are elements of a <a href="symbols/Panel.html#Position" class="linkConstant">Panel.Position</a> panel.</li></ul><p class="boxread">See <a href="../../intro/panels.html">the Introduction page on Panels</a>and <a href="../../intro/tablePanels.html">Table Panels</a> for an overview of the capabilities.<h3>Top-level GraphObjects are Parts</h3><p>A <a href="symbols/Part.html" class="linkConstructor">Part</a> is a derived class of GraphObject representing a top-level object.All top-level GraphObjects must be Parts, and Node, Link, Group, and Adornment derive from Part.The position of a Part determines the point of the Part's top-left corner in document coordinates.See also <a href="symbols/Part.html#location" class="linkProperty">Part.location</a>, which supports an way to specify the position based on a differentspot of a different element within the Part.<p>There are several read-only properties that help navigate up the visual tree.<ul><li>#panel returns the <a href="symbols/Panel.html" class="linkConstructor">Panel</a> that directly contains this GraphObject</li><li>#part returns the <a href="symbols/Part.html" class="linkConstructor">Part</a> that this GraphObject is in, perhaps via intervening Panels; this is frequently used in order to get to the model data, <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a></li><li>#layer returns the <a href="symbols/Layer.html" class="linkConstructor">Layer</a> that this GraphObject's Part is in</li><li>#diagram returns the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> that this GraphObject's Part's Layer is in</li></ul><p class="boxrun">See <a href="../../samples/visualTree.html">the Visual Tree sample</a>for a diagram displaying the visual tree of a simple diagram.<h3>User Interaction</h3><p>GraphObjects have several properties enabling dynamic customizable interaction.There are several definable functions that execute on input events: #mouseDragEnter,#mouseDragLeave, #mouseDrop, #mouseEnter, #mouseHold,#mouseHover, #mouseLeave, and #mouseOver.For example, you could define mouse enter-and-leave event handlers to modify the appearance of a linkas the mouse passes over it:<pre>myDiagram.linkTemplate =  $(go.Link,    $(go.Shape,      { strokeWidth: 2, stroke: "gray" },  // default color is "gray"      { // here E is the InputEvent and OBJ is this Shape        mouseEnter: function(e, obj) { obj.strokeWidth = 4; obj.stroke = "dodgerblue"; },        mouseLeave: function(e, obj) { obj.strokeWidth = 2; obj.stroke = "gray"; }      }));</pre><p>There are #click, #doubleClick, and #contextClick functionsthat execute when a user appropriately clicks the GraphObject.These click functions are called with the <a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a> as the first argumentand this GraphObject as the second argument.For example, you could define a click event handler on a Node that goes to another page:<pre>myDiagram.nodeTemplate =  $(go.Node, "Auto",    $(go.Shape, "RoundedRectangle",      new go.Binding("fill", "color")),    $(go.TextBlock,      { name: "TB", margin: 3 },      new go.Binding("text", "key")),    { // second arg will be this GraphObject, which in this case is the Node itself:      click: function(e, node) {        window.open("https://en.wikipedia.org/Wiki/" + node.data.key);      }    });</pre><p>Note: you may prefer defining <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> listeners on the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>rather than on individual GraphObjects.  DiagramEvents also include more general events thatdo not necessarily correspond to input events.<p>The properties #actionCancel, #actionDown, #actionMove,and #actionUp define functions to execute when the GraphObject's #isActionable propertyis set to true (default false). See the <a href="symbols/ActionTool.html" class="linkConstructor">ActionTool</a> for more detail.<p class="boxread">See <a href="../../intro/events.html">the Introduction page on Events</a> for a more general discussion.<h3>GraphObjects as Ports</h3><p>In GoJS, <a href="symbols/Link.html" class="linkConstructor">Link</a>s can only connect to elements within a <a href="symbols/Node.html" class="linkConstructor">Node</a>that are specified as "ports", and by default the only port is the Node itself.Setting the #portId of a GraphObject inside a Node allows that object to act as a port.Note: the only kind of model that can save which port a link is connected with, i.e. portIds that are not an empty string,is a <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> whose <a href="symbols/GraphLinksModel.html#linkFromPortIdProperty" class="linkProperty">GraphLinksModel.linkFromPortIdProperty</a> and<a href="symbols/GraphLinksModel.html#linkToPortIdProperty" class="linkProperty">GraphLinksModel.linkToPortIdProperty</a> have been set to name properties on the link data objects.<p>GraphObjects have several properties that are only relevant when they are acting as ports.These port-related properties are:<ul><li>#portId, which must be set to a string that is unique within the <a href="symbols/Node.html" class="linkConstructor">Node</a>,    in order for this GraphObject to be treated as a "port", rather than the whole node</li><li>#fromSpot and #toSpot, where a link should connect with this port</li><li>#fromEndSegmentLength and #toEndSegmentLength, the length of the link segment adjacent to this port</li><li>#fromEndSegmentDirection and #toEndSegmentDirection, the orientation of the link when connecting to this port</li><li>#fromShortLength and #toShortLength, the distance the link should terminate before touching this port</li><li>#fromLinkable and #toLinkable, whether the user may draw links connecting with this port</li><li>#fromLinkableDuplicates and #toLinkableDuplicates, whether the user may draw multiple links between the same pair of ports</li><li>#fromLinkableSelfNode and #toLinkableSelfNode, whether the user may draw a link between ports on the same node</li><li>#fromMaxLinks and #toMaxLinks, to limit the number of links connecting with this port in a particular direction</li></ul><p class="boxread">See <a href="../../intro/ports.html">the Introduction page on ports</a>and <a href="../../intro/connectionPoints.html">link connection points</a>for port usage information and examples.<h3>GraphObjects as labels on a Link</h3><p>GraphObjects can also be used as "labels" on a <a href="symbols/Link.html" class="linkConstructor">Link</a>.In addition to the #alignmentFocus property, these properties direct a Link Panelto position a "label" at a particular point along the route of the link, in a particular manner:<ul><li>#segmentIndex, which segment the label should be on</li><li>#segmentFraction, how far along the segment the label should be</li><li>#segmentOffset, where the label should be positioned relative to the segment</li><li>#segmentOrientation, how the label should be rotated relative to the angle of the segment</li></ul><p class="boxread">See <a href="../../intro/linkLabels.html">the Introduction page on link labels</a>for examples of how to make use of labels on Links.<h3>Interactive Behavior</h3><p>There are several properties that specify fairly high-level interactive behavior:<ul><li>#cursor, a CSS string specifying a cursor</li><li>#contextMenu, an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a></li><li>#toolTip, an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a></li></ul><p class="boxread">For more information, please read <a href="../../intro/contextMenus.html">the Introduction page about Context Menus</a>and <a href="../../intro/toolTips.html">the page about ToolTips</a>.<p class="boxrun">Also see <a href="../../samples/basic.html">the Basic sample</a>for examples of how to show context menus and tooltips.</div></div>
			
			<div><h2><a href="symbols/GridLayout.html" class="linkConstructor">GridLayout</a></h2><p>This simple layout places all of the Parts in a grid-like arrangement, ordered, spaced apart,and wrapping as needed.<span class="nodetails" id="xGridLayout"><a class="morelink" onclick="hst('GridLayout')">More...</a></span> <span class="details" id="GridLayout">  It ignores any Links connecting the Nodes being laid out.There are many samples that use GridLayout.Every <a href="symbols/Palette.html" class="linkConstructor">Palette</a> uses a GridLayout by default.If you want to experiment interactively with most of the properties, try the <a href="../../samples/gLayout.html">Grid Layout</a> sample.</span><div class="details" id="dGridLayout"><p>By default this layout will sort all of the Parts alphabetically(comparing <a href="symbols/Part.html#text" class="linkProperty">Part.text</a> values, respecting case)and position them left-to-right, separated by #spacing<c>.width</c>,until they do not fit in the current row.At that time it starts a new row, separated from the previous row by #spacing<c>.height</c>.There is a uniform cell size equal to the maximum Part width (plus spacing width)and the maximum part height (plus spacing height).At least one part is placed in each row, even if the part by itself is wider than the wrapping width.<p>You can specify values for the #cellSize <c>width</c> and <c>height</c>.If a part is wider than the cell size, it spans more than one cell in the row.You can also specify a value for the #wrappingWidth,which will be used instead of the diagram's viewport width, to control when each row is considered "full".The value of <a href="symbols/Layout.html#isViewportSized" class="linkProperty">Layout.isViewportSized</a> will be true whenthe value of #wrappingWidth is <code>NaN</code>.This causes the layout to be performed again automatically as the viewport changes size.<p>You can also set #wrappingColumn to limit the number of items in each row.Both the #wrappingWidth and the #wrappingColumn are respected when deciding when to wrap to the next row.<p>This layout is sufficiently simple that it does not use a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>.</div></div>
			
			<div><h2><a href="symbols/Group.html" class="linkConstructor">Group</a></h2><p>A Group is a <a href="symbols/Node.html" class="linkConstructor">Node</a> that can contain a subgraph of <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s,which are members of the group.<span class="nodetails" id="xGroup"><a class="morelink" onclick="hst('Group')">More...</a></span> <span class="details" id="Group"><p class="box">For more discussion, see <a href="../../intro/groups.html">Introduction to Groups</a>.</span><div class="details" id="dGroup"><p>Although you can create a Group and <a href="symbols/Diagram.html#add" class="linkMethod">Diagram.add</a> it to a Diagram, this does not update the Model.It is more common to create a group by adding a node data object to the modelby calling <a href="symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a>. For example:<pre>  myDiagram.startTransaction("make new group");  myDiagram.model.addNodeData({ key: "Omega", isGroup: true });  myDiagram.commitTransaction("make new group");</pre><p>This will cause a Group to be created (copying the template found in <a href="symbols/Diagram.html#groupTemplateMap" class="linkProperty">Diagram.groupTemplateMap</a>),added to the Diagram in some <a href="symbols/Layer.html" class="linkConstructor">Layer</a> (based on <a href="symbols/Part.html#layerName" class="linkProperty">Part.layerName</a>), and bound to the group data(resulting in <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a> referring to that group data object).Note that the JavaScript object includes setting <code>isGroup</code> to true,to indicate that the object represents a Group rather than a regular Node or simple Part.<p>The member Parts of a Group, which you can access as the #memberParts collection,belong to the group but are not in the visual tree of the group.All <a href="symbols/Part.html" class="linkConstructor">Part</a>s are directly in <a href="symbols/Layer.html" class="linkConstructor">Layer</a>s -- they cannot be inside a <a href="symbols/Panel.html" class="linkConstructor">Panel</a>.This allows group member parts to be in layers different from the group's layer.<p>You can change the membership of a <a href="symbols/Node.html" class="linkConstructor">Node</a> or a simple <a href="symbols/Part.html" class="linkConstructor">Part</a> in a Group by settingits <a href="symbols/Part.html#containingGroup" class="linkProperty">Part.containingGroup</a> property.This is done automatically for you by the diagram if you initialize the <code>group</code> property on the node datain the model to be the key of the containing group node data.Thus you should do something like:<pre class="javascript">  myDiagram.startTransaction("add new member");  myDiagram.model.addNodeData({ group: someexistinggroup.data.key, ... });  myDiagram.commitTransaction("add new member");</pre><p>where you would make sure the node data object included all of the properties you need.You can also change the relationship dynamically by calling <a href="symbols/GraphLinksModel.html#setGroupKeyForNodeData" class="linkMethod">GraphLinksModel.setGroupKeyForNodeData</a>.<p>The membership of <a href="symbols/Link.html" class="linkConstructor">Link</a>s is computed automatically for you by the diagram based on the membership ofthe connected <a href="symbols/Node.html" class="linkConstructor">Node</a>s.For example, if the <a href="symbols/Link.html#fromNode" class="linkProperty">Link.fromNode</a> is a top-level node but the <a href="symbols/Link.html#toNode" class="linkProperty">Link.toNode</a> is a member of a group,the link is a top-level link.If the two connected nodes both belong to the same group, the link is a member of that group.If the two connected nodes belong to different groups, the link belongs to the common container group, if there is any.Note that if a link connects a member of a group with the group itself, the link is a member of that group.<p>All of the group-member relationships effectively form a tree structure.These properties and methods are useful in navigating these relationships:<ul>  <li><a href="symbols/Part.html#containingGroup" class="linkProperty">Part.containingGroup</a></li>  <li><a href="symbols/Part.html#isTopLevel" class="linkProperty">Part.isTopLevel</a></li>  <li><a href="symbols/Part.html#findTopLevelPart" class="linkMethod">Part.findTopLevelPart</a></li>  <li><a href="symbols/Part.html#findSubGraphLevel" class="linkMethod">Part.findSubGraphLevel</a></li>  <li><a href="symbols/Part.html#findCommonContainingGroup" class="linkMethod">Part.findCommonContainingGroup</a></li>  <li>#memberParts</li>  <li>#findSubGraphParts</li>  <li>#findExternalLinksConnected</li>  <li>#findExternalNodesConnected</li></ul><p>As the membership of a group changes, you may want to update the appearance of the group.You can set the #memberAdded and #memberRemoved properties to be functions that are called.These functions must not modify any membership relationships -- these function properties just exist to update the appearance of the Group.<p>You can control whether certain Nodes are added to a Group by <a href="symbols/CommandHandler.html#groupSelection" class="linkMethod">CommandHandler.groupSelection</a> or#addMembers or <a href="symbols/CommandHandler.html#addTopLevelParts" class="linkMethod">CommandHandler.addTopLevelParts</a> by affecting the result of <a href="symbols/CommandHandler.html#isValidMember" class="linkMethod">CommandHandler.isValidMember</a>,which is responsible for deciding whether it is OK to add a Node to a Group or to remove a Node from a Group to be a top-level node.You can override that predicate on CommandHandler, but it is easier to set the #memberValidation or<a href="symbols/CommandHandler.html#memberValidation" class="linkProperty">CommandHandler.memberValidation</a> functional property.<p class="box">For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.<p>The area occupied by the subgraph is represented in the group's visual tree by a <a href="symbols/Placeholder.html" class="linkConstructor">Placeholder</a>.As the group #placeholder grows and shrinks based on the sizes and positions of the member nodes and links,the group will grow and shrink accordingly.The placeholder is always the <a href="symbols/Part.html#locationObject" class="linkProperty">Part.locationObject</a>,although you may specify any <a href="symbols/Spot.html" class="linkConstructor">Spot</a> as the <a href="symbols/Part.html#locationSpot" class="linkProperty">Part.locationSpot</a>.A Group need not have a placeholder, but it may have at most one.<p>A group has its own #layout property that is used to position the member nodes and route the member links.<p>The Group class also supports the notion of expanding and collapsing the subgraph,causing the member nodes and links to be shown or hidden.Principally this is a matter of setting #isSubGraphExpanded.Changes to this property will result in calls to #collapseSubGraph or #expandSubGraph, as appropriate.<p>If you want to change the appearance of the group you can do so in a function that you assign tothe #subGraphExpandedChanged property.This function must not modify any member relationships or expand or collapse any groups -- the functional property just existsto update the appearance of the Group.<p class="box">For more discussion and examples, see <a href="../../intro/subgraphs.html">SubGraphs</a>.<p>If you want the user to be able to create a Group out of the currentlyselected Parts using the <a href="symbols/CommandHandler.html#groupSelection" class="linkMethod">CommandHandler.groupSelection</a> command,you need to first set the <a href="symbols/CommandHandler.html#archetypeGroupData" class="linkProperty">CommandHandler.archetypeGroupData</a> propertyto a data object with <code>isGroup</code> set to true.If you want the user to be able to ungroup a Group,using the <a href="symbols/CommandHandler.html#ungroupSelection" class="linkMethod">CommandHandler.ungroupSelection</a> command,you need to set #ungroupable to true.<p class="box">For more discussion and examples, see <a href="../../intro/groups.html">Groups</a>,<a href="../../intro/subgraphs.html">SubGraphs</a>, and<a href="../../intro/sizedGroups.html">Sized Groups</a>.<p>Only Groups that are in Diagrams can have member Parts or connections via Links.Templates should not be connected with Links, be labels of Links, be members of Groups, have any member Parts, or have any Adornments.</div></div>
			
			<div><h2><a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a></h2><p>An InputEvent represents a mouse or keyboard or touch event.<span class="nodetails" id="xInputEvent"><a class="morelink" onclick="hst('InputEvent')">More...</a></span> <span class="details" id="InputEvent">The principal properties hold information about a particular input event.These properties include the #documentPoint at which a mouse eventoccurred in document coordinates,the corresponding point in view/element coordinates, #viewPoint,the #key for keyboard events,and the #modifiers and #button at the time.Additional descriptive properties include #clickCount, #delta,#timestamp, and the source event #event (if available).</span><div class="details" id="dInputEvent"><p>Many of its properties are provided for convenient access to the state of the input event,such as asking whether the #control key was held down at the time,or the #targetObject (a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>) that the mouse was over .<p>When real events fire on the Diagram, InputEvents are created automatically set update the value of <a href="symbols/Diagram.html#lastInput" class="linkProperty">Diagram.lastInput</a>.These events set the value of #event with the backing browser-defined Event,which may be a MouseEvent, KeyboardEvent, PointerEvent, TouchEvent, and so on.<p>InputEvents backed by MouseEvents set both #button, the button that caused the action,and #buttons, the set of buttons currently pressed after the action has happened.By default a user-created InputEvent sets #button and #buttons as if the event was a left-click.<p>You can create InputEvents and set the value of <a href="symbols/Diagram.html#lastInput" class="linkProperty">Diagram.lastInput</a> in order to simulate user actions in tools.This can be useful for testing. See the <a href="../../extensions/Robot.html">Robot extension sample</a> foran example of creating InputEvents to simulate user input.</div></div>
			
			<div><h2><a href="symbols/Iterable.html" class="linkConstructor">Iterable</a></h2><p>This interface is implemented by the <a href="symbols/List.html" class="linkConstructor">List</a>, <a href="symbols/Set.html" class="linkConstructor">Set</a>, and <a href="symbols/Map.html" class="linkConstructor">Map</a>classes; it provides the #iterator read-only property that returns an <a href="symbols/Iterator.html" class="linkConstructor">Iterator</a>.<span class="nodetails" id="xIterable"><a class="morelink" onclick="hst('Iterable')">More...</a></span> <span class="details" id="Iterable"></span><div class="details" id="dIterable"><p>Typical usage is:<pre>var it = anIterableCollection.iterator;while (it.next()) {  var item = it.value;}</pre></div></div>
			
			<div><h2><a href="symbols/Iterator.html" class="linkConstructor">Iterator</a></h2><p>This interface defines properties and methods for iterating over a collection;it provides the #next predicate and the #value read-only property.<span class="nodetails" id="xIterator"><a class="morelink" onclick="hst('Iterator')">More...</a></span> <span class="details" id="Iterator">Some Iterators also provide <code>key</code> property values along with each <code>value</code>.</span><div class="details" id="dIterator"><p>Typical usage is:<pre> var it = anIterableCollection.iterator; while (it.next()) {   var item = it.value; }</pre><p>Many iterators will signal an error if #next is calledafter the underlying collection has been modified.<p>To avoid confusion when dealing with <a href="symbols/Iterable.html" class="linkConstructor">Iterable</a>s,iterators implement the <a href="symbols/Iterable.html#iterator" class="linkProperty">Iterable.iterator</a> propertyby just returning themselves.</div></div>
			
			<div><h2><a href="symbols/Layer.html" class="linkConstructor">Layer</a></h2><p>Layers are how named collections of <a href="symbols/Part.html" class="linkConstructor">Part</a>s are drawn in front or behind other collections of Parts in a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.<span class="nodetails" id="xLayer"><a class="morelink" onclick="hst('Layer')">More...</a></span> <span class="details" id="Layer">Layers can only contain <a href="symbols/Part.html" class="linkConstructor">Part</a>s, such as <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s. They cannot hold <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s directly.</span><div class="details" id="dLayer"><p>You put a Part into a Layer by assigning <a href="symbols/Part.html#layerName" class="linkProperty">Part.layerName</a> with the name of the Layer.You can use data binding to initialize and remember a Part's layer's name.You can change a Part's layer by modifying its <a href="symbols/Part.html#layerName" class="linkProperty">Part.layerName</a>, which changes its <a href="symbols/Part.html#layer" class="linkProperty">Part.layer</a>.<p>Each Diagram starts off with the following list of Layers:"Grid", "Background", "" (the default layer), "Foreground", "Adornment", "Tool".Parts are normally put in the default layer.The "Grid", "Adornment", and "Tool" layers are considered #isTemporary.Changes to objects in temporary layers are not recorded by the <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.Parts in temporary layers are not selected and are not considered to be part of the document.The "Grid" layer is the furthest back; it also contains "temporary" parts that cannot be selected.Furthermore the "Grid" layer has #pickable set to false so that mouse or touch eventsand calls to the "find..." methods do not even consider any parts in that layer.<p>Layers have many properties that control what actions users are permitted to perform involving the parts in the layer.These properties are very much like the similarly named properties on <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.<h3>Z-ordering</h3><p>Layers are drawn and presented in order.You can add your own layers by calling <a href="symbols/Diagram.html#addLayerBefore" class="linkMethod">Diagram.addLayerBefore</a> or <a href="symbols/Diagram.html#addLayerAfter" class="linkMethod">Diagram.addLayerAfter</a>to insert a new layer at a particular place in the Z-order, or to re-order existing layers.Use <a href="symbols/Diagram.html#findLayer" class="linkMethod">Diagram.findLayer</a> to get the Layer with a particular name.<a href="symbols/Part.html" class="linkConstructor">Part</a>s can be individually z-ordered within a layer by setting <a href="symbols/Part.html#zOrder" class="linkProperty">Part.zOrder</a>.</div></div>
			
			<div><h2><a href="symbols/LayeredDigraphEdge.html" class="linkConstructor">LayeredDigraphEdge</a></h2><p>This holds <a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>-specific information about <a href="symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xLayeredDigraphEdge"><a class="morelink" onclick="hst('LayeredDigraphEdge')">More...</a></span> <span class="details" id="LayeredDigraphEdge"></span><div class="details" id="dLayeredDigraphEdge"><p>This class inherits from <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>.</div></div>
			
			<div><h2><a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></h2><p>This arranges nodes of directed graphs into layers (rows or columns).<span class="nodetails" id="xLayeredDigraphLayout"><a class="morelink" onclick="hst('LayeredDigraphLayout')">More...</a></span> <span class="details" id="LayeredDigraphLayout">There are many samples that use LayeredDigraphLayout.If you want to experiment interactively with most of the properties,try the <a href="../../samples/ldLayout.html">Layered Digraph Layout</a> sample.</span><div class="details" id="dLayeredDigraphLayout"><p>The #layerSpacing property controls the distance between layers.The #columnSpacing property controls the breadth of each "column" --this affects the distance between nodes within a layer, although the exact distance also depends on the breadth of each node.The #layeringOption property determines whether nodes without links coming in or without links going out arelined up at the edge of the graph, or whether they are positioned close to their connected nodes.<p>By default the layout will route the links in a manner that is consistent with the #direction.So, for example, if the #direction is 90 degrees (i.e. downward), the links are expected to go from the top towards the bottom.That means the links should come out from the bottom of the ports and should go into the top of the ports.Basically the layout will set <a href="symbols/Link.html#fromSpot" class="linkProperty">Link.fromSpot</a> to <code>Spot.Bottom</code> and <a href="symbols/Link.html#toSpot" class="linkProperty">Link.toSpot</a> to <code>Spot.Top</code>.<p>If you want to the links to use the spots that are given by the ports or by the links themselves, you will need to set#setsPortSpots to false to prevent this layout from setting the spots on the links.For example, if each node only has one port that is the whole node, and if you want the links to be spread out along the sidesof the nodes, then you should set #setsPortSpots to false and set the node's <a href="symbols/GraphObject.html#fromSpot" class="linkProperty">GraphObject.fromSpot</a> to<code>Spot.BottomSide</code> and <a href="symbols/GraphObject.html#toSpot" class="linkProperty">GraphObject.toSpot</a> to <code>Spot.TopSide</code>.<p>This layout handles links that form cycles better than <a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a> does.The normal routing behavior for "backwards" links is to route them "around" the source node and "around" the destination node,so that all links come in one side and go out the other side.However if you want "backwards" links to go more directly between nodes, set #setsPortSpots to false andthe node's <a href="symbols/GraphObject.html#fromSpot" class="linkProperty">GraphObject.fromSpot</a> and <a href="symbols/GraphObject.html#toSpot" class="linkProperty">GraphObject.toSpot</a> both to <code>Spot.TopBottomSides</code>.(Of course if the #direction is zero or 180, you'll want to use <code>Spot.LeftRightSides</code>.<p>If the diagram is structured in a tree-like fashion,it may be better to use <a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>,which has more options specific to trees.<a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a> is much faster than LayeredDigraphLayout,and can handle a limited number of links that would prevent thegraph structure from being a true tree (i.e. some nodes having multiple parents).<p>This layout makes use of a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of<a href="symbols/LayeredDigraphVertex.html" class="linkConstructor">LayeredDigraphVertex</a>es and <a href="symbols/LayeredDigraphEdge.html" class="linkConstructor">LayeredDigraphEdge</a>s that normallycorrespond to the <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s of the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.<p>The layout algorithm consists of four-major steps: Cycle Removal,Layer Assignment, Crossing Reduction, and Straightening and Packing.The layout cannot guarantee that it provides optimal positioning of nodes or routing of links.</div></div>
			
			<div><h2><a href="symbols/LayeredDigraphVertex.html" class="linkConstructor">LayeredDigraphVertex</a></h2><p>This holds <a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>-specific information about <a href="symbols/Node.html" class="linkConstructor">Node</a>s.<span class="nodetails" id="xLayeredDigraphVertex"><a class="morelink" onclick="hst('LayeredDigraphVertex')">More...</a></span> <span class="details" id="LayeredDigraphVertex"></span><div class="details" id="dLayeredDigraphVertex"><p>This class inherits from <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>.</div></div>
			
			<div><h2><a href="symbols/Layout.html" class="linkConstructor">Layout</a></h2><p>This is the base class for all of the predefined diagram layout implementations.<span class="nodetails" id="xLayout"><a class="morelink" onclick="hst('Layout')">More...</a></span> <span class="details" id="Layout">They only arrange <a href="symbols/Part.html" class="linkConstructor">Part</a>s (primarily <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s) in a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>,not to <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s in <a href="symbols/Panel.html" class="linkConstructor">Panel</a>s (i.e. panel layout).</span><div class="details" id="dLayout"><p>The layout classes include <a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>, <a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>,<a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>, <a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>, and <a href="symbols/GridLayout.html" class="linkConstructor">GridLayout</a>.This base class is not abstract -- in fact an instance of this base class is the defaultvalue for <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> and for <a href="symbols/Group.html#layout" class="linkProperty">Group.layout</a>.<p>An instance of a Layout class will be the value of <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a>.That layout positions the graph of top-level nodes and links.Nodes and links that belong to a <a href="symbols/Group.html" class="linkConstructor">Group</a> are laid out by that group's <a href="symbols/Group.html#layout" class="linkProperty">Group.layout</a>.The Diagram will automatically perform all nested group layouts before laying out the whole diagram.<p>If you have position information for all of the nodes when you load a model,you will typically have data bound the <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> to some property on your node data.In order to avoid an initial layout causing those saved node positions to be discarded,you can either not set the <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> to a predefined layout or you canset #isInitial to false.<p>Because performing layouts can be expensive in space and time, automatic layoutsare performed only on "invalid" layouts, and only well after a layout has been invalidated.This state is held by the #isValidLayout property.Many standard operations, such as adding or removing nodes or links, will causethe layout that is responsible for positioning those nodes or routing those linksto be invalidated.Such invalidation is performed by calling #invalidateLayout,which not only clears the #isValidLayout state but also requests that the diagramdo an automatic layout soon.You can avoid such invalidations by setting #isOngoing to false.<p>Layouts will ignore parts that have <a href="symbols/Part.html#isLayoutPositioned" class="linkProperty">Part.isLayoutPositioned</a> set to falseor parts that are not <a href="symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a>.Layouts will also ignore parts that are in layers that are <a href="symbols/Layer.html#isTemporary" class="linkProperty">Layer.isTemporary</a>.<p>Various operations on <a href="symbols/Part.html" class="linkConstructor">Part</a>s will cause the responsible Layout to be invalidated.This includes adding or removing parts, changing their visibility, and changing their size.You can disable such automatic layout invalidations by setting <a href="symbols/Part.html#layoutConditions" class="linkProperty">Part.layoutConditions</a>to the combination of Part flags named "Layout..." that you want.<p>But operations on parts are not the only way in which layouts become invalidated.Setting most properties on the layouts, thereby changing their behavior, will invalidate that layout.Replacing the <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> or <a href="symbols/Group.html#layout" class="linkProperty">Group.layout</a> will automatically invalidate the new layout.If #isViewportSized is true, when a diagram's <a href="symbols/Diagram.html#viewportBounds" class="linkProperty">Diagram.viewportBounds</a> changes size,the <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> is invalidated.(This is normally only true for <a href="symbols/GridLayout.html" class="linkConstructor">GridLayout</a>s when its <a href="symbols/GridLayout.html#wrappingWidth" class="linkProperty">GridLayout.wrappingWidth</a> is <code>NaN</code>.Most layouts do not care about the size of the viewport.)<p>You can also explicitly call <a href="symbols/Diagram.html#layoutDiagram" class="linkMethod">Diagram.layoutDiagram</a>, which can invalidate all layouts andthen perform them all.But we recommend that you avoid doing so, to allow the normal updating process perform layouts as needed.<p>If an automatic layout is the first time that a layout has been performed for the model,the diagram first raises the <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> named "InitialLayoutCompleted".Whenever a Diagram finishes an automatic layout, it raises the DiagramEvent named "LayoutCompleted".<p>It is also possible to call #doLayout explicitly, but this is uncommon and only used withinstances of Layout that are not the <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> or <a href="symbols/Group.html#layout" class="linkProperty">Group.layout</a>.It should only be needed when you want to layout a collection of nodes and links that is notthe normal graph of top-level parts of a Diagram or a subgraph of a Group.<p>More complicated layouts make use of a separate <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>, consisting of <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>es and <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>s,that normally holds a graph that is isomorphic to the graph consisting of <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s in the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> or <a href="symbols/Group.html" class="linkConstructor">Group</a>.The implementation of #doLayout will call #makeNetwork and remember the result as the #network.#makeNetwork will call #createNetwork and initialize it by adding new instances of LayoutVertexes and LayoutEdgescorresponding to the given collection of Nodes and Links.<p>When #doLayout is finished with its work it will call #updateParts, which will call #commitLayoutto set new node locations and route links. It then normally discards the #network.<p>The LayoutVertex and LayoutEdge instances allow the layout to work with more information about each Node and Link withoutactually modifying those Nodes and Links until #commitLayout is called to actually set the Node locations and route the Links.The use of a LayoutNetwork also allows the Layout to work with a graph that is not isomorphic to the given collection of Nodes and Links.This is useful when needing to use dummy vertexes and/or edges to achieve certain layout behaviors,or when one wants to ignore certain vertexes or edges, without actually modifying or adding or removing the diagram's nodes or links.<p>An instance of this base class provides a rudimentary default layout that will positionall of the parts that have no position (i.e. the <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> is (NaN,NaN).Parts that already have a position are ignored.This primitive layout class does not make use of a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> becauseit ignores all links.<p>To implement your own custom layouts, you can inherit from either this class orfrom one of the other predefined layout classes.If you inherit from this base class, you will want to override the #doLayout method.You can call the <a href="symbols/Part.html#move" class="linkMethod">Part.move</a> method to re-position a part, including whole groups.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call a base method.</div></div>
			
			<div><h2><a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a></h2><p>An edge represents a Link in a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>,along with its #fromVertex and #toVertex.<span class="nodetails" id="xLayoutEdge"><a class="morelink" onclick="hst('LayoutEdge')">More...</a></span> <span class="details" id="LayoutEdge">The #link property may be null for edges that represent "dummy" links,when the layout wants to work with a network that is not isomorphic with the collection of Nodes and Links being laid out.</span><div class="details" id="dLayoutEdge"><p>It holds layout-specific data for the link.For each kind of layout that uses a LayoutNetwork there is a subclass of <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a> and a subclass of <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>:<ul><li><a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>: <a href="symbols/CircularVertex.html" class="linkConstructor">CircularVertex</a> and <a href="symbols/CircularEdge.html" class="linkConstructor">CircularEdge</a></li><li><a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>: <a href="symbols/ForceDirectedVertex.html" class="linkConstructor">ForceDirectedVertex</a> and <a href="symbols/ForceDirectedEdge.html" class="linkConstructor">ForceDirectedEdge</a></li><li><a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>: <a href="symbols/LayeredDigraphVertex.html" class="linkConstructor">LayeredDigraphVertex</a> and <a href="symbols/LayeredDigraphEdge.html" class="linkConstructor">LayeredDigraphEdge</a></li><li><a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>: <a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> and <a href="symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a></li></ul><p>Modifying a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> or a <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a> or a <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a> does notinvalidate the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> or raise any changed events.</div></div>
			
			<div><h2><a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></h2><p>This provides an abstract view of a diagram as anetwork (graph) of vertexes and directed edges.<span class="nodetails" id="xLayoutNetwork"><a class="morelink" onclick="hst('LayoutNetwork')">More...</a></span> <span class="details" id="LayoutNetwork">The network contains vertexes and edges corresponding to <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s.</span><div class="details" id="dLayoutNetwork"><p>This class provides a framework for manipulating thestate of nodes and links without modifying the structure of the diagram.Having a separate representation also permits adding or removing vertexes or edgesfrom the network so that the graph that is laid out is not isomorphic to the diagram's graph.<p>For each kind of layout that uses a LayoutNetwork there is a subclass of <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a> and a subclass of <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>:<ul><li><a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>: <a href="symbols/CircularVertex.html" class="linkConstructor">CircularVertex</a> and <a href="symbols/CircularEdge.html" class="linkConstructor">CircularEdge</a></li><li><a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>: <a href="symbols/ForceDirectedVertex.html" class="linkConstructor">ForceDirectedVertex</a> and <a href="symbols/ForceDirectedEdge.html" class="linkConstructor">ForceDirectedEdge</a></li><li><a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>: <a href="symbols/LayeredDigraphVertex.html" class="linkConstructor">LayeredDigraphVertex</a> and <a href="symbols/LayeredDigraphEdge.html" class="linkConstructor">LayeredDigraphEdge</a></li><li><a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>: <a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> and <a href="symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a></li></ul><p>Modifying a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> or a <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a> or a <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a> does notinvalidate the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> or raise any changed events.</div></div>
			
			<div><h2><a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a></h2><p>A vertex represents a <a href="symbols/Node.html" class="linkConstructor">Node</a> in a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>,along with its #bounds and #focus and collections of <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>s that come into and go out of the vertex.<span class="nodetails" id="xLayoutVertex"><a class="morelink" onclick="hst('LayoutVertex')">More...</a></span> <span class="details" id="LayoutVertex">The #node property may be null for vertexes that represent "dummy" nodes,when the layout wants to work with a network that is not isomorphic with the collection of Nodes and Links being laid out.</span><div class="details" id="dLayoutVertex"><p>This holds layout-specific data for the node.For each kind of layout that uses a LayoutNetwork there is a subclass of <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a> and a subclass of <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>:<ul><li><a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>: <a href="symbols/CircularVertex.html" class="linkConstructor">CircularVertex</a> and <a href="symbols/CircularEdge.html" class="linkConstructor">CircularEdge</a></li><li><a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>: <a href="symbols/ForceDirectedVertex.html" class="linkConstructor">ForceDirectedVertex</a> and <a href="symbols/ForceDirectedEdge.html" class="linkConstructor">ForceDirectedEdge</a></li><li><a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>: <a href="symbols/LayeredDigraphVertex.html" class="linkConstructor">LayeredDigraphVertex</a> and <a href="symbols/LayeredDigraphEdge.html" class="linkConstructor">LayeredDigraphEdge</a></li><li><a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>: <a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> and <a href="symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a></li></ul><p>Modifying a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> or a <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a> or a <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a> does notinvalidate the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> or raise any changed events.</div></div>
			
			<div><h2><a href="symbols/Link.html" class="linkConstructor">Link</a></h2><p>A Link is a <a href="symbols/Part.html" class="linkConstructor">Part</a> that connects <a href="symbols/Node.html" class="linkConstructor">Node</a>s.<span class="nodetails" id="xLink"><a class="morelink" onclick="hst('Link')">More...</a></span> <span class="details" id="Link">The link relationship is directional, going from <a href="symbols/Link.html#fromNode" class="linkProperty">Link.fromNode</a> to <a href="symbols/Link.html#toNode" class="linkProperty">Link.toNode</a>.A link can connect to a specific port element in a node, as named by the <a href="symbols/Link.html#fromPortId" class="linkProperty">Link.fromPortId</a>and <a href="symbols/Link.html#toPortId" class="linkProperty">Link.toPortId</a> properties.<p class="boxread">For more discussion, see <a href="../../intro/links.html">Introduction to Links</a>.</span><div class="details" id="dLink"><p>To add a Link to a Diagram when using a <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> you should do something like:<pre>  myDiagram.startTransaction("make new link");  myDiagram.model.addLinkData({ from: "Alpha", to: "Beta" });  myDiagram.commitTransaction("make new link");</pre><p>where you would substitute the keys of the actual nodes that you want to connect with a link.This will cause a Link to be created (copying the template found in <a href="symbols/Diagram.html#linkTemplateMap" class="linkProperty">Diagram.linkTemplateMap</a>),added to the Diagram in some <a href="symbols/Layer.html" class="linkConstructor">Layer</a> (based on <a href="symbols/Part.html#layerName" class="linkProperty">Part.layerName</a>), and bound to the link data(resulting in <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a> referring to that link data object).Note that link data objects, unlike <a href="symbols/Node.html" class="linkConstructor">Node</a> data, do not have their own unique keys or identifiers,because other Parts do not refer to them.<p>If you are using a <a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, there are no link data objects, so you just need to call<a href="symbols/TreeModel.html#setParentKeyForNodeData" class="linkMethod">TreeModel.setParentKeyForNodeData</a> to specify the "parent" node's key for a "child" node data.<p>To find a <a href="symbols/Link.html" class="linkConstructor">Link</a> given a link data object in the <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>,call <a href="symbols/Diagram.html#findLinkForData" class="linkMethod">Diagram.findLinkForData</a>.  When using a <a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, call either <a href="symbols/Diagram.html#findNodeForData" class="linkMethod">Diagram.findNodeForData</a>or <a href="symbols/Diagram.html#findNodeForKey" class="linkMethod">Diagram.findNodeForKey</a> to get a Node, and then call <a href="symbols/Node.html#findTreeParentLink" class="linkMethod">Node.findTreeParentLink</a> to get the Link, if any exists.<p>To find a link that connects two nodes, call <a href="symbols/Node.html#findLinksTo" class="linkMethod">Node.findLinksTo</a> or <a href="symbols/Node.html#findLinksBetween" class="linkMethod">Node.findLinksBetween</a>.With the former method, the direction matters; with the latter method it returns links in either direction.<p>A link's position and size are determined by the two nodes that it connects.Normally there should be a <a href="symbols/Shape.html" class="linkConstructor">Shape</a> as the main element in this Link.This shape is what users will see as the "line" or "wire" --you can set its <a href="symbols/Shape.html#stroke" class="linkProperty">Shape.stroke</a> and other "stroke..." properties to control its appearance.<p>The link will compute a route (a sequence of points) going from the #fromNode's port elementto the #toNode's port element.That route is used to generate the path of the main shape.Properties that affect the nature of the route and the geometry of the path include:<ul>  <li>#curve</li>  <li>#curviness</li>  <li>#corner</li>  <li>#routing</li>  <li>#smoothness</li>  <li>#adjusting</li></ul><p class="boxread">For more discussion and examples, see <a href="../../intro/links.html">Links</a>.<p>There are additional properties that affect how the end of the link connects to a port element of a node.There are duplicate properties, ones for the "to" end and ones for the "from" end:<ul>  <li>#fromSpot, #toSpot</li>  <li>#fromEndSegmentLength, #toEndSegmentLength</li>  <li>#fromEndSegmentDirection, #toEndSegmentDirection</li>  <li>#fromShortLength, #toShortLength</li></ul><p>These properties normally have "default" values, causing the link's routing and path-geometry generatingto get the corresponding values from the connected port element.This scheme permits an individual link to have its own specific connection to a port,taking precedence over how the port normally expects links to connect to it.For example, several of the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> classes sets these properties on each Linkas part of their route computation for links.<p class="boxread">For more discussion and examples, see <a href="../../intro/connectionPoints.html">Link Points</a>.<p>Elements other than the main <a href="symbols/Shape.html" class="linkConstructor">Shape</a> in the Link may act as decorations on the link, including arrowheads and labels.You can control where they are located along the link route and how they are oriented.Because these decorations may be any <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>, they are all properties of that class.The properties include:<ul>  <li><a href="symbols/GraphObject.html#segmentIndex" class="linkProperty">GraphObject.segmentIndex</a></li>  <li><a href="symbols/GraphObject.html#segmentFraction" class="linkProperty">GraphObject.segmentFraction</a></li>  <li><a href="symbols/GraphObject.html#segmentOffset" class="linkProperty">GraphObject.segmentOffset</a></li>  <li><a href="symbols/GraphObject.html#segmentOrientation" class="linkProperty">GraphObject.segmentOrientation</a></li></ul>If you do not set the <a href="symbols/GraphObject.html#segmentIndex" class="linkProperty">GraphObject.segmentIndex</a> property, the object is positionedto be at the middle of the link.<p class="boxread">For more discussion and examples, see <a href="../../intro/linkLabels.html">Link Labels</a>.<p><b>GoJS</b> makes it easy to add arrowheads to your link template.Just add a <a href="symbols/Shape.html" class="linkConstructor">Shape</a> with the appearance properties that you want,and also set the <a href="symbols/Shape.html#toArrow" class="linkProperty">Shape.toArrow</a> or <a href="symbols/Shape.html#fromArrow" class="linkProperty">Shape.fromArrow</a> propertyto the name of the kind of arrowhead that you want.Doing so automatically sets the "segment..." properties that are appropriate for the chosen arrowhead.<p>More than one shape may automatically get the route geometry.This is useful when you want to have multiple link shapes with different thicknessesto create a gradient effect across the path of the link or to produce parallel lines along the path.Just set <a href="symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> to true on each such <a href="symbols/Shape.html" class="linkConstructor">Shape</a>.<p>If you want the user to be able to reconnect a link, using the <a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a>,you need to set one or both of #relinkableFrom and #relinkableTo to true.The <a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a> shows a <a href="symbols/RelinkingTool.html#fromHandleArchetype" class="linkProperty">RelinkingTool.fromHandleArchetype</a> and/or a<a href="symbols/RelinkingTool.html#toHandleArchetype" class="linkProperty">RelinkingTool.toHandleArchetype</a> when the link is selected.Such a relink handle can be dragged by the user to start a relinking operation.<p>If you want the user to be able to change the path of the link, using the <a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a>,set <a href="symbols/Part.html#reshapable" class="linkProperty">Part.reshapable</a> to true.The <a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a> shows reshape handles that the user can drag to shift the positionof a point in the link's route.The <a href="symbols/LinkReshapingTool.html#handleArchetype" class="linkProperty">LinkReshapingTool.handleArchetype</a> is copied for each reshape handle.<p>Often if a Link is reshapable, you will want to save the route in the model so that it can be restoredupon load.  To save the route automatically, add a TwoWay Binding on the #points property:<code>new go.Binding("points").makeTwoWay()</code>.  <a href="symbols/Model.html#toJson" class="linkMethod">Model.toJson</a> will automaticallyconvert the <a href="symbols/List.html" class="linkConstructor">List</a> of <a href="symbols/Point.html" class="linkConstructor">Point</a>s into an Array of numbers in the JSON representation,if the property is named "points".<p>If a Link is <a href="symbols/Part.html#reshapable" class="linkProperty">Part.reshapable</a>, it is also possible to allow the user to add and remove segmentsfrom the link's route by setting #resegmentable to true.This causes the <a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a> to add resegmenting handles at the midpoints of each segment.The <a href="symbols/LinkReshapingTool.html#midHandleArchetype" class="linkProperty">LinkReshapingTool.midHandleArchetype</a> is copied for each resegment handle.When the user drags such a resegmenting handle, a new segment is inserted into the route.Also, when the user drags a reshape handle such that two adjacent segments end up in a straight line,a segment is removed from the route.<p class="boxread">For more discussion and examples, see <a href="../../intro/links.html">Links</a>,<a href="../../intro/linkLabels.html">Link Labels</a>, and<a href="../../intro/connectionPoints.html">Link Points</a>.<p class="boxread">To control what links a user may draw or reconnect, please read about<a href="../../intro/validation.html">Validation</a>.<p>Only Links that are in Diagrams can have connections with Nodes.Templates should not be connected with Nodes, be members of Groups, or have any Adornments.</div></div>
			
			<div><h2><a href="symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></h2><p>This abstract class is the base class for the <a href="symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a> and <a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a> classes.<span class="nodetails" id="xLinkingBaseTool"><a class="morelink" onclick="hst('LinkingBaseTool')">More...</a></span> <span class="details" id="LinkingBaseTool"></span><div class="details" id="dLinkingBaseTool"><p>This class includes properties for defining and accessing any temporary nodes and temporary linkthat are used during any linking operation, as well as access to the existing diagram's nodes and link(if any) that are involved with the linking operation.<p class="boxread">For a general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.</div></div>
			
			<div><h2><a href="symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></h2><p>The LinkingTool lets a user draw a new <a href="symbols/Link.html" class="linkConstructor">Link</a> between two ports,using a mouse-drag operation.<span class="nodetails" id="xLinkingTool"><a class="morelink" onclick="hst('LinkingTool')">More...</a></span> <span class="details" id="LinkingTool"></span><div class="details" id="dLinkingTool"><p>By default an instance of this tool is installed as a mouse-move tool in the<a href="symbols/Diagram.html#toolManager" class="linkProperty">Diagram.toolManager</a> as the <a href="symbols/ToolManager.html#linkingTool" class="linkProperty">ToolManager.linkingTool</a>.However this tool may be used modally, as described below.<p>#canStart calls #findLinkablePort to find a valid "port" elementfrom which (or to which) the user may interactively draw a new link.#doActivate sets up a temporary link and two temporary nodes,one at the start port and one following the mouse.<p class="boxread">For a general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.<p>This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.<p>This tool conducts a transaction while the tool is active.A successful linking will result in a "LinkDrawn" <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> and a "Linking" transaction.<p>If you want to programmatically start a new user mouse-gesture to draw a new linkfrom a given <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that may be a "port" or may be withinthe visual tree of a "port", set the #startObject propertyto let #findLinkablePort find the real "port" element.Then start and activate this tool:<pre>  var tool = myDiagram.toolManager.linkingTool;  tool.startObject = ...;  myDiagram.currentTool = tool;  tool.doActivate();</pre></div></div>
			
			<div><h2><a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></h2><p>The LinkReshapingTool is used to interactively change the route of a <a href="symbols/Link.html" class="linkConstructor">Link</a>by setting its <a href="symbols/Link.html#points" class="linkProperty">Link.points</a> list.<span class="nodetails" id="xLinkReshapingTool"><a class="morelink" onclick="hst('LinkReshapingTool')">More...</a></span> <span class="details" id="LinkReshapingTool">You may want to save the route to the model by using a TwoWay <a href="symbols/Binding.html" class="linkConstructor">Binding</a> on the "points" property of the Link.</span><div class="details" id="dLinkReshapingTool"><p>This tool makes use of an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>, shown when the adorned <a href="symbols/Link.html" class="linkConstructor">Link</a> is selected,that includes some number of reshape handles.This tool conducts a transaction while the tool is active.A successful reshaping will result in a "LinkReshaped" <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> and a "LinkReshaping" transaction.</div></div>
			
			<div><h2><a href="symbols/List.html" class="linkConstructor">List</a></h2><p>An ordered iterable collection.<span class="nodetails" id="xList"><a class="morelink" onclick="hst('List')">More...</a></span> <span class="details" id="List">It optionally enforces the type of elements that may be added to the List.</span><div class="details" id="dList"><p>An example usage:<pre>  var list = new go.List(go.Point);  // make a list of Points  list.add(new go.Point(0, 0));  list.add(new go.Point(20, 10));  list.add(new go.Point(10, 20));  // now list.length === 3  // and list.elt(1) instanceof go.Point</pre><p>You can iterate over the items in a List:<pre>  var it = aList.iterator;  while (it.next()) {    window.console.log("#" + it.key + " is " + it.value);  }</pre>Or:<pre>  aList.each(function(val) {      window.console.log(val);    });</pre>The key will range from zero to #count-1.<p>For convenience this <b>GoJS</b> List class has synonyms for the following methods and property:<ul>  <li><b>get(idx)</b>: #elt</li>  <li><b>set(idx,val)</b>: #setElt</li>  <li><b>has(val)</b>: #contains</li>  <li><b>delete(val)</b>: #remove</li>  <li><b>clear()</b>: <a href="symbols/UndoManager.html#clear" class="linkMethod">clear</a></li>  <li><b>size</b>: #count</li></ul></div></div>
			
			<div><h2><a href="symbols/Map.html" class="linkConstructor">Map</a></h2><p>An unordered iterable collection of key/value pairs that cannot contain two instances of the same key.<span class="nodetails" id="xMap"><a class="morelink" onclick="hst('Map')">More...</a></span> <span class="details" id="Map">It optionally enforces the type of the key and the type of the associated value.</span><div class="details" id="dMap"><p>To create a Map:<pre>  var map = new go.Map("string", "number");  map.add("one", 1);  map.add("two", 2);  map.add("three", 3);  // now map.count === 3  // and map.getValue("two") === 2  // and map.contains("zero") === false</pre><p>You can iterate over the key/value pairs in a Map:<pre>  var it = aMap.iterator;  while (it.next()) {    window.console.log(it.key + ": " + it.value);  }</pre>Or:<pre>  aMap.each(function(kvp) {    window.console.log(kvp.key + ": " + kvp.value);  });</pre>But note that there is no guaranteed ordering amongst the key/value pairs.<p>Call #toKeySet to get a read-only <a href="symbols/Set.html" class="linkConstructor">Set</a> that holds all of the keys of a Map.Iterating over that Set will produce values that are the keys in the Map.<p>Although not precisely implementing the features and semantics of the EcmaScript 6 <b>Map</b> class,this <b>GoJS</b> Map class has synonyms for the following methods and property:<ul>  <li><b>get(key)</b>: #getValue</li>  <li><b>set(key,val)</b>: #add</li>  <li><b>has(key)</b>: #contains</li>  <li><b>delete(key)</b>: #remove</li>  <li><b>clear()</b>: <a href="symbols/UndoManager.html#clear" class="linkMethod">clear</a></li>  <li><b>size</b>: #count</li></ul></div></div>
			
			<div><h2><a href="symbols/Margin.html" class="linkConstructor">Margin</a></h2><p>A Margin represents a band of space outside or inside a rectangular area,with possibly different values on each of the four sides.<span class="nodetails" id="xMargin"><a class="morelink" onclick="hst('Margin')">More...</a></span> <span class="details" id="Margin"></span><div class="details" id="dMargin"><p>Example uses include <a href="symbols/GraphObject.html#margin" class="linkProperty">GraphObject.margin</a>, <a href="symbols/Panel.html#padding" class="linkProperty">Panel.padding</a>, and <a href="symbols/Diagram.html#padding" class="linkProperty">Diagram.padding</a>.<p>Use the static functions <a href="symbols/Margin.html#.parse" class="linkStatic">Margin.parse</a> and <a href="symbols/Margin.html#.stringify" class="linkStatic">Margin.stringify</a> to convert to and froma standard string representation that is independent of the current locale.<p>When an instance of this class is the value of a property of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> class or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>or <a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a> or a <a href="symbols/Tool.html" class="linkConstructor">Tool</a> class, you should treat the objectas if it were frozen or read-only -- you cannot modify its properties.This allows the property to return a value without allocating a new instance.If you need to do your own calculations with the value, call #copy to makea new instance with the same values that you can modify.<p>Many methods modify the object's properties and then return a reference to "this" object.The only instance method to allocate a new object is the #copy method.The static <a href="symbols/Margin.html#.parse" class="linkStatic">Margin.parse</a> method also allocates a new object.<p>The "Debug" implementation of this class is significantly slower than the "Release" implementation,mostly due to additional error checking.<p>You cannot inherit from this class.</div></div>
			
			<div><h2><a href="symbols/Model.html" class="linkConstructor">Model</a></h2><p>Models hold the essential data of a diagram, describing the basic entities and their properties and relationshipswithout specifying the appearance and behavior of the Nodes and Links and Groups that represent them visually.<span class="nodetails" id="xModel"><a class="morelink" onclick="hst('Model')">More...</a></span> <span class="details" id="Model">Models tend to hold only relatively simple data, making them easy to persist by serialization as JSON or XML formatted text.</span><div class="details" id="dModel"><p>Models hold simple data objects, not <a href="symbols/Part.html" class="linkConstructor">Part</a>s such as <a href="symbols/Node.html" class="linkConstructor">Node</a>s or <a href="symbols/Link.html" class="linkConstructor">Link</a>s.Node data is normally represented in a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> by instances of <a href="symbols/Node.html" class="linkConstructor">Node</a>,but they could be represented by simple <a href="symbols/Part.html" class="linkConstructor">Part</a>s or by <a href="symbols/Group.html" class="linkConstructor">Group</a>s.A Diagram constructs Parts for its <a href="symbols/Diagram.html#model" class="linkProperty">Diagram.model</a>'s data by copying templates.Templates are <a href="symbols/Panel.html" class="linkConstructor">Panel</a>s of <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s that get some property values from the model data,accessible via the <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a> property, using data <a href="symbols/Binding.html" class="linkConstructor">Binding</a>.See <a href="../../intro/usingModels.html">Using Models</a> and <a href="../../intro/dataBinding.html">Data Binding</a> for an introduction.<p>This Model class only supports holding an array of node dataand interpreting properties on that data to be able to refer to themusing unique key values.To support simple tree-structured graphs, use a <a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, which inherits from this class.To support links and grouping, use a <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>.<p>Each node data object is assumed to have a unique key value.The #nodeKeyProperty property names the property on the node data whose valueis the unique key for that node data object.The default value for this property is "key".You should not have a TwoWay data binding on the node key property,because that might cause the property value to be set to a duplicate key value.<p>The key values must be either strings or numbers or undefined.If the key is undefined, or if there are duplicate key values,the model will automatically try to assign a new unique key value.Caution: if your keys are numbers, do not try to use string representations of those numbers as keys.Conversely, if your keys are strings that happen to have number syntax, do not try to use those number values.Sometimes JavaScript will automatically convert from string to number or vice-versa, but sometimes it won't.<p>For example, one can define a graph consisting of just two nodes:<pre class="javascript"> model.nodeDataArray = [   { key: "Alpha" },   { key: "Beta" } ];</pre><p>This model cannot detect the modification of the #nodeDataArray arrayor the modification of any node data object.If you want to add or remove node data from the #nodeDataArray,call the #addNodeData or #removeNodeData methods.<p>If you want to modify a node data object, it depends on whether the property you want to changeis a structural property that the model needs to know about, or whether it is a propertythat is only used for data binding or other application-specific purposes.<p>For the former case, call the appropriate method, such as#setKeyForNodeData, #setCategoryForNodeData,<a href="symbols/GraphLinksModel.html#setToKeyForLinkData" class="linkMethod">GraphLinksModel.setToKeyForLinkData</a>, or <a href="symbols/GraphLinksModel.html#setGroupKeyForNodeData" class="linkMethod">GraphLinksModel.setGroupKeyForNodeData</a>.These methods have names that start with "set", "add", "insert", or "remove".<p>For the latter case, when setting an application-specific property, typically for data binding,and to support undo/redo, call #setDataProperty.<p>The #copyNodeData method can be called to make a shallow copy of a node data object.However, if some of those property values are Arrays that want not to be shared but to be copied,you can set #copiesArrays to true.  This is typically very useful when dealingwith data bound item arrays.Furthermore if the items in those copied Arrays are in fact Objects that need to be copied,you can also set #copiesArrayObjects to true, causing a copied Array to refer tonewly shallow-copied objects of the original array.<p>Each model raises <a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>s that you can follow by registering a listener via #addChangedListener.Read more at the Introduction page: <a href="../../intro/changedEvents.html">Changed Events</a>.<p>Each model comes with its own <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a> that is initially not enabled.You will need to set <a href="symbols/UndoManager.html#isEnabled" class="linkProperty">UndoManager.isEnabled</a> to true in order for theUndoManager to record model changes and for your users to perform undo and redo.<p>You can temporarily turn off the recording of changes by setting#skipsUndoManager to true.A number of places within the system do that routinely in order to avoid recording temporary changes,so be sure to remember the original value beforehand and restore it afterwards.<p>One normally saves a diagram by just saving its model.If you can use JSON-formatted text, this is easy to do -- just call #toJsonto get the string representation of the model, and save that string.Load the diagram by replacing the <a href="symbols/Diagram.html#model" class="linkProperty">Diagram.model</a> with one created by callingthe static function <a href="symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a>:<pre class="javascript">  myDiagram.model = go.Model.fromJson(loadedString);</pre>Note that JSON and other textual data formats cannot faithfully store all JavaScript functions.#toJson and <a href="symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> do not try to save and load functional property values.You should arrange that all such functions, including event handlers, are established by your app.#toJson and <a href="symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> also cannot handle circular references; any sharing ofreferences will be lost too.They also skip properties that are not enumerable, those whose names start with an underscore, and those whose values are undefined.<p>Note that models also do not store the templates used by diagrams,nor any transient or temporary parts such as <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s, nor any tools,nor any <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a> state, nor any event listeners.These objects and all other properties of diagrams must be established by your app.<p>You can add any number of properties to the #modelData object, which is serialized and deserializedinto JSON just like any other model data for nodes or links.However #modelData is associated with the model as a whole and does not depend on the existenceof any node data or link data.<p>It is also easy to save the changes that were recorded in the most recent transaction.Call #toIncrementalJson to generate a JSON-format string that holds the current state of modified dataplus the keys of inserted or removed data.That method requires as an argument a <a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> that represents a transaction that completed oran undo or a redo that just finished.<p>It is also possible to use such "incremental" JSON to modify an existing model.Call #applyIncrementalJson, giving it a string generated by #toIncrementalJson,to modify this model by making all of the changes recorded in the JSON text.Note how this method is a regular instance method, whereas <a href="symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> is a static function.</div></div>
			
			<div><h2><a href="symbols/Node.html" class="linkConstructor">Node</a></h2><p>A Node is a <a href="symbols/Part.html" class="linkConstructor">Part</a> that may connect to other nodes with <a href="symbols/Link.html" class="linkConstructor">Link</a>s,or that may be a member of a <a href="symbols/Group.html" class="linkConstructor">Group</a>.<span class="nodetails" id="xNode"><a class="morelink" onclick="hst('Node')">More...</a></span> <span class="details" id="Node"></span><div class="details" id="dNode"><p><a href="symbols/Group.html" class="linkConstructor">Group</a> inherits from Node,enabling nodes to logically contain other nodes and links.<p class="boxread">For a more general discussion of how to define nodes, see <a href="../../intro/nodes.html">Introduction to Nodes</a>.<p>Although you can create a Node and <a href="symbols/Diagram.html#add" class="linkMethod">Diagram.add</a> it to a Diagram, this does not update the Model.It is more common to create a node by adding a node data object to the modelby calling <a href="symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a>. For example:<pre>  myDiagram.startTransaction("make new node");  myDiagram.model.addNodeData({ key: "Omega" });  myDiagram.commitTransaction("make new node");</pre><p>This will cause a Node or simple <a href="symbols/Part.html" class="linkConstructor">Part</a> to be created (copying the template found in <a href="symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>),added to the Diagram in some <a href="symbols/Layer.html" class="linkConstructor">Layer</a> (based on <a href="symbols/Part.html#layerName" class="linkProperty">Part.layerName</a>), and bound to the node data(resulting in <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a> referring to that node data object).If you do not keep a reference to that JavaScript object, as the above code does not,you can retrieve it later by calling <a href="symbols/Model.html#findNodeDataForKey" class="linkMethod">Model.findNodeDataForKey</a>.<p>It is very common to initialize a Diagram by setting <a href="symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> to a JavaScript Arrayof JavaScript objects holding the properties that you need in your model.Nearly all of the samples do this kind of initialization.<p>You can delete a Node by either calling <a href="symbols/Diagram.html#remove" class="linkMethod">Diagram.remove</a> or by calling <a href="symbols/Model.html#removeNodeData" class="linkMethod">Model.removeNodeData</a>.The latter obviously will modify the Model; the former does so if the Node was created from model data.Commands such as <a href="symbols/CommandHandler.html#deleteSelection" class="linkMethod">CommandHandler.deleteSelection</a> call these methods within a transaction.<p>You can find all of the <a href="symbols/Link.html" class="linkConstructor">Link</a>s that are connected with a Node by calling #findLinksConnected.Because links normally have a direction, you can find all of the links that have their <a href="symbols/Link.html#toNode" class="linkProperty">Link.toNode</a>be a given Node by calling #findLinksInto.Similarly, you can call #findLinksOutOf to find all of the links coming out from a node;such links have their <a href="symbols/Link.html#fromNode" class="linkProperty">Link.fromNode</a> be that node.For tree-structured graphs, use #findTreeChildrenLinks or #findTreeParentLink.<p>If you are not so interested in the links but are interested in the nodes at the other end of the linksconnecting with a node, there are other methods that you can call.#findNodesConnected returns all of the nodes that are at the other end of the links thatconnect with a given node.#findNodesInto and #findNodesOutOf return the subsets of those nodes consideringonly those links that go into or come out of the given node.For tree-structured graphs, use #findTreeChildrenNodes or #findTreeParentNode.<p>For example, to operate on the data of all of the destination nodes:<pre>var it = somenode.findNodesOutOf();while (it.next()) {  var child = it.value;  if (child.data.text.indexOf("special") >= 0) { ... }}</pre><p>You can link two nodes by creating a new <a href="symbols/Link.html" class="linkConstructor">Link</a>, setting its <a href="symbols/Link.html#toNode" class="linkProperty">Link.toNode</a> and <a href="symbols/Link.html#fromNode" class="linkProperty">Link.fromNode</a>(in either order), and <a href="symbols/Diagram.html#add" class="linkMethod">Diagram.add</a>ing it to the diagram.But it is more common to add a link data object to the <a href="symbols/Diagram.html#model" class="linkProperty">Diagram.model</a> by calling <a href="symbols/GraphLinksModel.html#addLinkData" class="linkMethod">GraphLinksModel.addLinkData</a>.Just creating and adding a <a href="symbols/Link.html" class="linkConstructor">Link</a> will not update the model.<p>Thus to add a link when using a <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> you should do something like:<pre>  myDiagram.startTransaction("make new link");  myDiagram.model.addLinkData({ from: "Alpha", to: "Beta" });  myDiagram.commitTransaction("make new link");</pre><p>Where you would substitute the keys of the actual nodes that you want to connect with a link.If you are using a <a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, there are no link data objects, so you just need to call<a href="symbols/TreeModel.html#setParentKeyForNodeData" class="linkMethod">TreeModel.setParentKeyForNodeData</a> to specify the "parent" node's key for a "child" node data.<p>To find a <a href="symbols/Link.html" class="linkConstructor">Link</a> given a link data object in the <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>,call <a href="symbols/Diagram.html#findLinkForData" class="linkMethod">Diagram.findLinkForData</a>.  When using a <a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, call either <a href="symbols/Diagram.html#findNodeForData" class="linkMethod">Diagram.findNodeForData</a>or <a href="symbols/Diagram.html#findNodeForKey" class="linkMethod">Diagram.findNodeForKey</a> to get a Node, and then call #findTreeParentLink to get the Link, if any exists.<p>To find a link that connects two nodes, call #findLinksTo or #findLinksBetween.With the former method, the direction matters; with the latter method it returns links in either direction.<p>As links connect with a node or are disconnected, you may want to update the appearance of the node.You can set the #linkConnected and #linkDisconnected properties to be functions that are called.These functions must not modify any link relationships -- the properties just exist to update the appearance of the node.A typical usage would be to change the color or figure of a shape.<p>You can control whether the user may draw a new link or reconnect a link between a pair of Nodesby affecting the result of <a href="symbols/LinkingBaseTool.html#isValidLink" class="linkMethod">LinkingBaseTool.isValidLink</a>.You can override that predicate on <a href="symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a> and <a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a>,but it is easier to set the #linkValidation or<a href="symbols/LinkingBaseTool.html#linkValidation" class="linkProperty">LinkingBaseTool.linkValidation</a> functional property.<p class="boxread">For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.<p>Nodes also support the ability to provide logical and physical distinctions in the connection pointsthat links use at a node. These connection objects are called "ports".By default the port object will be the whole <a href="symbols/Node.html" class="linkConstructor">Node</a>.However, you can set the <a href="symbols/GraphObject.html#portId" class="linkProperty">GraphObject.portId</a> property on any <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> in the visual tree of a nodeto cause that element to be treated as a "port".The "port id" is just a string that ought to be unique amongst all of the port elements in the node.<p>In the case of a node only having a single port, you should set the <a href="symbols/GraphObject.html#portId" class="linkProperty">GraphObject.portId</a> as an empty string.When there is no such element declared as the default port, it uses the whole node.You can use the #port property to get the only port element.<p>When a node should have multiple ports,i.e. multiple <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s acting as separate connection points for links,you should set each port's <a href="symbols/GraphObject.html#portId" class="linkProperty">GraphObject.portId</a> to a string value that is unique for the node.When there may be multiple ports on a node, you can get a collection of elements representing portsby using the #ports property.Use the #findPort method to find a particular port element by name.<p>Note: the only kind of model that can save port information, i.e. portIds that are not an empty string,for links is a <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> whose <a href="symbols/GraphLinksModel.html#linkFromPortIdProperty" class="linkProperty">GraphLinksModel.linkFromPortIdProperty</a> and<a href="symbols/GraphLinksModel.html#linkToPortIdProperty" class="linkProperty">GraphLinksModel.linkToPortIdProperty</a> have been set to name properties on the link data objects.<p class="boxread">For a more general discussion of ports, see <a href="../../intro/ports.html">Introduction to Ports</a>.<p>All of the "findLinks..." and "findNodes..." methods mentioned above take an optional port id argument.When no argument is passed, these methods consider all links connecting with the node.When a port id argument is provided, these methods only consider links that connect with that portin the given node.Thus when navigating through the diagram, you can easily look at all of the nodes that links coming out ofa given node go to.  Or you can just look at those nodes at the ends of links coming out of a particular port.<p>You can also control the default connecting behavior of <a href="symbols/Link.html" class="linkConstructor">Link</a>s at each port.Because a port can be any <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>, they are all properties on GraphObject.The properties are duplicated so that you can guide the "from" ends of links differently from the "to" ends of links.The properties include:<ul>  <li><a href="symbols/GraphObject.html#fromSpot" class="linkProperty">GraphObject.fromSpot</a>, <a href="symbols/GraphObject.html#toSpot" class="linkProperty">GraphObject.toSpot</a></li>  <li><a href="symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">GraphObject.fromEndSegmentLength</a>, <a href="symbols/GraphObject.html#toEndSegmentLength" class="linkProperty">GraphObject.toEndSegmentLength</a></li>  <li><a href="symbols/GraphObject.html#fromEndSegmentDirection" class="linkProperty">GraphObject.fromEndSegmentDirection</a>, <a href="symbols/GraphObject.html#toEndSegmentDirection" class="linkProperty">GraphObject.toEndSegmentDirection</a></li>  <li><a href="symbols/GraphObject.html#fromShortLength" class="linkProperty">GraphObject.fromShortLength</a>, <a href="symbols/GraphObject.html#toShortLength" class="linkProperty">GraphObject.toShortLength</a></li>  <li><a href="symbols/GraphObject.html#fromLinkable" class="linkProperty">GraphObject.fromLinkable</a>, <a href="symbols/GraphObject.html#toLinkable" class="linkProperty">GraphObject.toLinkable</a></li>  <li><a href="symbols/GraphObject.html#fromLinkableDuplicates" class="linkProperty">GraphObject.fromLinkableDuplicates</a>, <a href="symbols/GraphObject.html#toLinkableDuplicates" class="linkProperty">GraphObject.toLinkableDuplicates</a></li>  <li><a href="symbols/GraphObject.html#fromLinkableSelfNode" class="linkProperty">GraphObject.fromLinkableSelfNode</a>, <a href="symbols/GraphObject.html#toLinkableSelfNode" class="linkProperty">GraphObject.toLinkableSelfNode</a></li>  <li><a href="symbols/GraphObject.html#fromMaxLinks" class="linkProperty">GraphObject.fromMaxLinks</a>, <a href="symbols/GraphObject.html#toMaxLinks" class="linkProperty">GraphObject.toMaxLinks</a></li></ul><p>The "...Spot" and "...Length" and "...Direction" properties control the position and routing of links at a port.The "...Linkable..." and "...MaxLinks" properties control whether or not users can draw a new linkor reconnect an existing link from or to a port.(The "...Spot" and "...Length" and "...Direction" properties also exist on <a href="symbols/Link.html" class="linkConstructor">Link</a>, to override for a particularlink the default values that come from a port element.)<p class="boxread">For a more general discussion of link points, see <a href="../../intro/connectionPoints.html">Introduction to Link Connection Points</a>.<p>When the graph is tree-structured, you can use several functions for traversing the tree:<ul>  <li>#findTreeParentNode</li>  <li>#findTreeChildrenNodes</li>  <li>#findTreeParentLink</li>  <li>#findTreeChildrenLinks</li>  <li>#findTreeRoot</li>  <li>#findTreeParts</li>  <li>#findCommonTreeParent</li>  <li>#isInTreeOf</li>  <li>#findTreeLevel</li></ul><p>Determining whether a tree grows from the root via links that go out to the children or vice-versais controlled for the whole diagram by the <a href="symbols/Diagram.html#isTreePathToChildren" class="linkProperty">Diagram.isTreePathToChildren</a> property.However an individual link will be ignored by the above functions if <a href="symbols/Link.html#isTreeLink" class="linkProperty">Link.isTreeLink</a> is false.<p>The Node class also supports the notion of expanding and collapsing a subtree of nodes and links,causing those nodes and links to be shown or hidden.Principally this is a matter of setting <a href="symbols/Node.html#isTreeExpanded" class="linkProperty">Node.isTreeExpanded</a>.Of course if the diagram's graph is not tree-structured, these concepts and properties might not apply.<p>If you want to change the appearance of the node you can do so in a function that you assign tothe #treeExpandedChanged property.This function must not modify any link relationships or expand or collapse any subtrees -- the property just existsto update the appearance of the node.<p>There is an option for link routing to try to avoid crossing over nodes:<a href="symbols/Link.html#routing" class="linkProperty">Link.routing</a> = <a href="symbols/Link.html#AvoidsNodes" class="linkConstant">Link.AvoidsNodes</a>.You can control whether such links should avoid or ignore a node by setting #avoidable.Set #avoidableMargin to control the area beyond the <a href="symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>where AvoidsNodes links should not go.<p class="boxread">For more discussion and examples, see <a href="../../intro/nodes.html">Nodes</a>,<a href="../../intro/ports.html">Ports</a>, and<a href="../../intro/connectionPoints.html">Link Points</a>.<p class="boxread">For more about trees, see <a href="../../intro/trees.html">Trees</a>, and<a href="../../intro/subtrees.html">SubTrees</a>.<p>Only Nodes that are in Diagrams can have connections via Links.Templates should not be connected with Links, be labels of Links, be members of Groups, or have any Adornments.</div></div>
			
			<div><h2><a href="symbols/Overview.html" class="linkConstructor">Overview</a></h2><p>An Overview is a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> that displays all of a different diagram,with a rectangular box showing the viewport displayed by that other diagram.<span class="nodetails" id="xOverview"><a class="morelink" onclick="hst('Overview')">More...</a></span> <span class="details" id="Overview"></span><div class="details" id="dOverview"><p>All you need to do is set <a href="symbols/Overview.html#observed" class="linkProperty">Overview.observed</a>.For example:<p><pre>  var myDiagram = new go.Diagram("myDiagramDIV");  . . . other initialization . . .  // create and initialize the Overview:  new go.Overview("myOverviewDIV").observed = myDiagram;</pre><p>The Overview draws what the observed Diagram is displaying,so setting or modifying any diagram templates or template Maps has no effect.At the current time methods such as <a href="symbols/Diagram.html#makeImage" class="linkMethod">Diagram.makeImage</a>,<a href="symbols/Diagram.html#makeImageData" class="linkMethod">Diagram.makeImageData</a> and <a href="symbols/Diagram.html#makeSvg" class="linkMethod">Diagram.makeSvg</a> do not work on Overviews.<p>For more discussion, see <a href="../../intro/overview.html">Overview</a>.</div></div>
			
			<div><h2><a href="symbols/Palette.html" class="linkConstructor">Palette</a></h2><p>Palette extends the Diagram class to allow objects to be dragged and placed onto other Diagrams.<span class="nodetails" id="xPalette"><a class="morelink" onclick="hst('Palette')">More...</a></span> <span class="details" id="Palette">Its <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> is a <a href="symbols/GridLayout.html" class="linkConstructor">GridLayout</a>.The Palette is <a href="symbols/Diagram.html#isReadOnly" class="linkProperty">Diagram.isReadOnly</a> but to support drag-and-drop its <a href="symbols/Diagram.html#allowDragOut" class="linkProperty">Diagram.allowDragOut</a> is true.</span><div class="details" id="dPalette"><p>You can control the order of Parts in the palette in several manners:<ul><li>If you want to keep the order given by <code>myPalette.model.nodeDataArray</code>,    just set <code>myPalette.layout.sorting = go.GridLayout.Forward</code> (<a href="symbols/GridLayout.html#sorting" class="linkProperty">GridLayout.sorting</a>).</li><li>If you want to sort based on some text string associated with each Part, just bind <a href="symbols/Part.html#text" class="linkProperty">Part.text</a>.</li><li>If you want to sort more generally, set <code>myPalette.layout.comparer</code> (<a href="symbols/GridLayout.html#comparer" class="linkProperty">GridLayout.comparer</a>).</li></ul></div></div>
			
			<div><h2><a href="symbols/Panel.html" class="linkConstructor">Panel</a></h2><p>A Panel is a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that holds other GraphObjects as its elements.<span class="nodetails" id="xPanel"><a class="morelink" onclick="hst('Panel')">More...</a></span> <span class="details" id="Panel">A Panel is responsible for sizing and positioning its elements.The elements of a panel are drawn in the order in which they appear in the #elements collection.</span><div class="details" id="dPanel"><p>The <a href="symbols/Part.html" class="linkConstructor">Part</a> class inherits from Panel; Part in turn is the base class of <a href="symbols/Node.html" class="linkConstructor">Node</a> and <a href="symbols/Link.html" class="linkConstructor">Link</a>.<p>Every Panel has a #type and establishes its own coordinate system. The type of a Paneldetermines how it will size and arrange its elements:<ul><li><a href="symbols/Panel.html#Position" class="linkConstant">Panel.Position</a> is used to arrange elements based on their absolute positions within the Panel's local coordinate system.</li><li><a href="symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a> and <a href="symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a> are used to create linear "stacks" of elements.</li><li><a href="symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a> is used to size the main element to fit around other elements in the Panel.</li><li><a href="symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a> is used to arrange elements based on the <a href="symbols/Spot.html" class="linkConstructor">Spot</a> properties <a href="symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a>and <a href="symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a>, relative to a main element of the panel.</li><li><a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> is used to arrange elements into rows and columns, typically employing the differentelements' <a href="symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a>, <a href="symbols/GraphObject.html#rowSpan" class="linkProperty">GraphObject.rowSpan</a>, <a href="symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a>,and <a href="symbols/GraphObject.html#columnSpan" class="linkProperty">GraphObject.columnSpan</a> properties. This Panel type also makes use of <a href="symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>.</li><li><a href="symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> can only be used immediately within a <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> Panel    to organize a collection of elements as a row or as a column in a table.</li><li><a href="symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a> is used to automatically resize a single element to fit inside the panel's available area.</li><li><a href="symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> is not used to house typical elements, but is used only to draw regular patterns of lines.    The elements must be <a href="symbols/Shape.html" class="linkConstructor">Shape</a>s used to describe the repeating lines.</li><li><a href="symbols/Panel.html#Link" class="linkConstant">Panel.Link</a> is only used by <a href="symbols/Link.html" class="linkConstructor">Link</a> parts and Link Adornments.</li></ul>Using <a href="../../intro/buildingObjects.html">GraphObject.make</a>, the second argument can be used to declare the Panel type:<pre>// Either:$(go.Panel, go.Panel.Horizontal, ...// Or:$(go.Panel, "Horizontal", ...// Full example:$(go.Panel, "Horizontal",  { width: 60, height: 60 }, // panel properties  // elements in the panel:  $(go.Shape, "Rectangle", { stroke: "lime" }),  $(go.TextBlock, "Some Text")) // end of panel definition </pre><p class="boxread">For an overview of all Panel types, please read the <a href="../../intro/panels.html">Introduction page on Panels</a>and <a href="../../intro/tablePanels.html">Table Panels</a>.<p><a href="symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a> and <a href="symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a> panels are frequently used to position two or more GraphObjectsvertically above each other or horizontally next to each other.  Use the <a href="symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> or<a href="symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> properties on the individual elements to control their position and size.<p><a href="symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a> and <a href="symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a> panels have a "main" element, signified by the Panel's first elementwith <a href="symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> set to true.  If there is no such element, it uses the first element as the "main" one.Use the <a href="symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> property to position elements with respect to the main element.Use the <a href="symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a> property to further specify the position within Spot Panels."Spot" and "Auto" Panels should have two or more elements in them.<p>In <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> panels you will want to set the <a href="symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a> and <a href="symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a>properties on each element.  The <a href="symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> and <a href="symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> properties are alsouseful when an element's table cell is larger than that element.Please read <a href="../../intro/tablePanels.html">Table Panels</a> for more examples and explanation.<p><a href="symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> panels can only be used as elements within a <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> Panel.They are typically only used in item templates, e.g. for automatically creating rows in a Table Panel based on model dataprovided in an #itemArray. You will still need to specify properties on the individual elements within a TableRowor TableColumn as if they were immediate elements of the containing Table panel.<p class="boxrun">For an example that uses TableRow Panels, see <a href="../../samples/records.html">Records sample</a>.<p><a href="symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> panels are often used for the Diagram's <a href="symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>.<pre>$(go.Diagram, "myDiagramDiv",  { . . .    grid: $(go.Panel, "Grid",            { gridCellSize: new go.Size(40, 40) },            $(go.Shape, "LineH", { stroke: "lightgray" }),            $(go.Shape, "LineV", { stroke: "lightgray" })          ),    . . .  });</pre>Or to get a green bar effect:<pre>$(go.Diagram, "myDiagramDiv",  { . . .    grid: $(go.Panel, "Grid",            { gridCellSize: new go.Size(100, 100) },            $(go.Shape, "BarH", { fill: "lightgreen", height: 50 })          ),    . . .  });</pre>But Grid Panels can also be stand alone objects:<pre>$(go.Node, go.Panel.Grid,  { gridCellSize: new go.Size(6, 6), width: 60, height: 60 },  $(go.Shape, "LineH", { stroke: "gray" }),  $(go.Shape, "LineV", { stroke: "gray" }))</pre><p>A Grid Panel's elements do not participate in object picking.<h3>Changing and accessing elements of a Panel</h3><p>You can change the collection of #elements by calling #add, #insertAt, #remove, or #removeAt.You can get direct access to a particular element by calling #elt.<p>You can search the visual tree of a Panel for GraphObjects that given a <a href="symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> using #findObject.<h3>Panel Size and Appearance</h3><p>Panels typically compute their own size based on their elements and Panel #type,but can also be sized by setting <a href="symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a>, <a href="symbols/GraphObject.html#minSize" class="linkProperty">GraphObject.minSize</a>, and <a href="symbols/GraphObject.html#maxSize" class="linkProperty">GraphObject.maxSize</a>.Setting an explicit size on a Panel may cause nested elements of that panel to size themselves differently,especially in the cases of nested elements having a <a href="symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> value or <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a>'s having word wrap.<p>Panels have no visual components of their own unless a <a href="symbols/GraphObject.html#background" class="linkProperty">GraphObject.background</a> or <a href="symbols/GraphObject.html#areaBackground" class="linkProperty">GraphObject.areaBackground</a> is specifiedor separators are specified either as defaults for the whole Table Panel or on individual <a href="symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>s.<p>In addition to the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties on elements that are only used by certain types of panels,several Panel properties only apply to specific Panel types.<ul>  <li>Panels of #type <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> use the #rowCount, #rowSizing, #columnCount,#columnSizing, #leftIndex, #topIndex, and all of the "default" separator properties.</li>  <li>Panels of #type <a href="symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> do not act like regular GraphObjects,      instead they are only to be used immediately within a <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>. They are pass-through containers      that hold elements for their parent table, and ignore their own scale and angle.</li>  <li>Panels of #type <a href="symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> use the #gridCellSize and #gridOrigin properties.</li>  <li>Panels of #type <a href="symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a> use the #viewboxStretch property.</li></ul><p class="boxread">For live examples of all Panel types, see the <a href="../../intro/panels.html">Introduction page on Panels.</a><h3>Data Binding</h3><p>Panels also provide fundamental support for data binding.When a diagram gets a new model or when a diagram's model is augmented with additional data,the diagram automatically creates a new Node or Link whose #data property refers to the correspondingnode data or link data object.<p class="boxread">For more discussion of data binding, please read the <a href="../../intro/usingModels.html">Introduction page on Models</a>and <a href="../../intro/dataBinding.html">Data Binding</a>.<p>Panels provide support for automatically creating elements within the Panel based on items in a JavaScript Array.This is achieved by setting or binding the #itemArray property, which acts in a manner similarto the <a href="symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> property.You can supply an #itemTemplate, which must itself be a simple Panel, which is copied to create the elementin this container Panel corresponding to an item in the itemArray.This property is analogous to the <a href="symbols/Diagram.html#nodeTemplate" class="linkProperty">Diagram.nodeTemplate</a> property, although for the diagram thetemplate must be a <a href="symbols/Node.html" class="linkConstructor">Node</a>, <a href="symbols/Group.html" class="linkConstructor">Group</a>, or simple <a href="symbols/Part.html" class="linkConstructor">Part</a>.<p>Much like the <a href="symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>, Panel's #itemTemplateMap supports having multiple templates,so that the actual structure of the element created for a data item can be chosen dynamically.Just as the <a href="symbols/Model.html#nodeCategoryProperty" class="linkProperty">Model.nodeCategoryProperty</a> determines which template in the <a href="symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>is copied to create a <a href="symbols/Node.html" class="linkConstructor">Node</a>, the #itemCategoryProperty names the data property whose valuechooses the Panel in the itemTemplateMap to copy for the item.<p>When binding the #itemArray property, it is commonplace to set <a href="symbols/Model.html#copiesArrays" class="linkProperty">Model.copiesArrays</a> and<a href="symbols/Model.html#copiesArrayObjects" class="linkProperty">Model.copiesArrayObjects</a> properties to true, so that when a node is copied, the item Array and itscontents are copied, not shared.  Or more generally, to customize the model's copying processes, youcan supply a custom <a href="symbols/Model.html#copyNodeDataFunction" class="linkProperty">Model.copyNodeDataFunction</a>.<p class="boxread">For more discussion and examples of item arrays, please read the <a href="../../intro/itemArrays.html">Introduction page on Item Arrays</a>.</div></div>
			
			<div><h2><a href="symbols/PanningTool.html" class="linkConstructor">PanningTool</a></h2><p>The PanningTool supports manual panning, where the user can shift the<a href="symbols/Diagram.html#position" class="linkProperty">Diagram.position</a> by dragging the mouse.<span class="nodetails" id="xPanningTool"><a class="morelink" onclick="hst('PanningTool')">More...</a></span> <span class="details" id="PanningTool"></span><div class="details" id="dPanningTool"><p>This tool is a standard mouse-move tool, the <a href="symbols/ToolManager.html#panningTool" class="linkProperty">ToolManager.panningTool</a>.Although the <a href="symbols/ToolManager.html#dragSelectingTool" class="linkProperty">ToolManager.dragSelectingTool</a> takes precedence over this tool,the <a href="symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a> only starts if there is a delay after a mouse-down event.If it does not start, then this PanningTool gets a chance to start.<p>This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.This tool does not modify the model or conduct any transaction.</div></div>
			
			<div><h2><a href="symbols/Part.html" class="linkConstructor">Part</a></h2><p>This is the base class for all user-manipulated top-level objects.<span class="nodetails" id="xPart"><a class="morelink" onclick="hst('Part')">More...</a></span> <span class="details" id="Part">Because it inherits from <a href="symbols/Panel.html" class="linkConstructor">Panel</a>, it is automatically a visual containerof other <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s.Because it thus also inherits from <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>, it also has properties such as<a href="symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>, <a href="symbols/GraphObject.html#contextMenu" class="linkProperty">GraphObject.contextMenu</a>, and <a href="symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a>.</span><div class="details" id="dPart"><p>If you just want an object that users can select and manipulate,you can create an instance of this class.<p>If you want an object that also supports being connected by links to other objects,use the <a href="symbols/Node.html" class="linkConstructor">Node</a> class, which inherits from Part.Create those connections by using instances of the <a href="symbols/Link.html" class="linkConstructor">Link</a> class.<p>If you want a node that logically contains a subgraph of nodes and links,use the <a href="symbols/Group.html" class="linkConstructor">Group</a> class, which inherits from <a href="symbols/Node.html" class="linkConstructor">Node</a>.<p>If you want an object that decorates another Part, without having to modify that Part,use the <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a> class.Adornments do not support linking or grouping or being selected.<p>You can construct a Part, add <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s to it programmatically,and then add the part to a diagram by calling <a href="symbols/Diagram.html#add" class="linkMethod">Diagram.add</a>.However it is commonplace to add data to a model by setting its <a href="symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> or calling <a href="symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a>,or for <a href="symbols/Link.html" class="linkConstructor">Link</a>s, setting the <a href="symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">GraphLinksModel.linkDataArray</a> or calling <a href="symbols/GraphLinksModel.html#addLinkData" class="linkMethod">GraphLinksModel.addLinkData</a>.Such actions will cause a diagram that is displaying the model to copy a template,which is a Part that may have data <a href="symbols/Binding.html" class="linkConstructor">Binding</a>s, and add the new part to the diagram.The <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a> property will refer to that data object in the model.<p>Some examples of adding Parts to a Diagram:<pre>// A simple Part templatemyDiagram.nodeTemplate =  $(go.Part, "Horizontal",    $(go.Shape, "Circle", { width: 20, height: 20 }),    $(go.TextBlock, "Hello World")  );// Node templates can be either Nodes, or simple Parts// (But not Groups, Adornments, or Links)// Adds copies of the nodeTemplate bound to the specified node data:myDiagram.model.nodeDataArray =[  { key: "Alpha" },  { key: "Beta" }];// Adds one copy of the nodeTemplate bound to the given node data:myDiagram.model.addNodeData( { key: "Gamma" } );</pre><p class="boxread">See the <a href="../../intro/usingModels.html">Introduction on using Models</a>for examples and more information.<h3>Layers and Z-ordering</h3><p>Parts added to a Diagram exist in one of the Diagram's <a href="symbols/Layer.html" class="linkConstructor">Layer</a>s.You can specify which layer the part should be in by setting #layerName.Parts cannot be nested in the visual tree -- they cannot be added to other Parts of Panels.<p>Parts can be individually z-ordered within a layer by setting #zOrder.Parts within the same layer that have a higher zOrder number will be drawn above parts with a lower number.<h3>Size and Position</h3><p>The size and position of a part are given by its <a href="symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>.The size is determined by the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s that are elements inside this part.You can change the position by setting <a href="symbols/GraphObject.html#position" class="linkProperty">GraphObject.position</a> or <a href="symbols/Part.html#location" class="linkProperty">Part.location</a>.<p>The "location" of a part is commonly the same as its "position".The "position" is always the point that is at the top-left corner of the area occupied by the part.But the "location" may be different from the "position" if you want to think of the part as being "at" a different spot in the part.For example, you might want the "location" to be at the center of a <a href="symbols/Picture.html" class="linkConstructor">Picture</a> that has a <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a> title of arbitrary size.In this case you would set the #locationSpot to be <a href="symbols/Spot.html#Center" class="linkConstant">Spot.Center</a> and the #locationObjectNameto be the name of the Picture element in your Part.<p>A part may be selected or de-selected by setting its #isSelected property.This may also happen due to a call to <a href="symbols/Diagram.html#select" class="linkMethod">Diagram.select</a> or other operations that change the selection.The user may change this property as part of the operation of the <a href="symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a>,due to the user's mouse click, if the part is #selectable.<h3>Ability Properties (Permissions)</h3><p>There are many properties named "...able", that control what operations the user may perform on this part.These properties correspond to the similarly named properties on <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> and <a href="symbols/Layer.html" class="linkConstructor">Layer</a> that govern thebehavior for all parts in all layers or for all parts in the given layer.For example, the <a href="symbols/Part.html#copyable" class="linkProperty">Part.copyable</a> property corresponds to the properties <a href="symbols/Diagram.html#allowCopy" class="linkProperty">Diagram.allowCopy</a> and <a href="symbols/Layer.html#allowCopy" class="linkProperty">Layer.allowCopy</a>.<p>For each of these "ability" properties there is a corresponding "can..." predicate.For example, the <a href="symbols/Part.html#canCopy" class="linkMethod">Part.canCopy</a> predicate is false if any of the three previously named properties is false.Commands and tools will normally call these predicates rather than just looking at Part properties.<p class="boxread">For more discussion about permissions, please read: <a href="../../intro/permissions.html">Permissions</a>.<p>As previously mentioned, each <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> supports the notion of selected parts.One way of displaying that a part is selected is by modifying the part.You can set the #selectionChanged property to be a function that is called when the value of #isSelected has changed;it is passed the Part as the first argument.The function can modify the color of one or more <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s in the visual tree of that Part.Or perhaps it could toggle the <a href="symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a> property of an object that is normally hidden when the part is not selected.<p>The Part class also supports showing separate visual objects for a part when it gets selected.These visuals are typically used to show that the part is selected ("selection handles")or are used to allow the user to manipulate or modify the part with a tool ("tool handles").These handles are instances of <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s.The #updateAdornments method is responsible for showing or hiding adornments,normally depending on whether the part is selected.<p>When the #selectionAdorned property is true, a selected part automatically gets an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a> created for it.By default the selection adornment is just a simple blue box around the Part, and a blue shape following the route of a selected Link.However you can set the #selectionAdornmentTemplate to an arbitrarily complex Adornment.This way it can show more information or buttons for executing various commands when the user selects a Part.<p>Tool handles are shown for those mode-less mouse-down tools that need it.The process of updating adornments for a part will call <a href="symbols/Tool.html#updateAdornments" class="linkMethod">Tool.updateAdornments</a> on each tool in <a href="symbols/ToolManager.html#mouseDownTools" class="linkProperty">ToolManager.mouseDownTools</a>.Most tools might not need special tool handles.But, for example, <a href="symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a> naturally will want to create an adornment with eight resize handlespositioned at the corners and at the middles of the sides of the selected node's visual element,if the node has its #canResize function returning true.<p>One may not always want the whole Part to get the selection handle or all tool handles.Sometimes one wants to emphasize selection by highlighting a particular element within the part's visual tree.This can be achieved by setting the #selectionObjectName property,and making sure the desired element has the same <a href="symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> property value.<p class="boxread">For more discussion about selection, see <a href="../../intro/selection.html">Selection</a>.<p>Similarly the #resizeObjectName and #rotateObjectName properties direct thecorresponding <a href="symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a> and <a href="symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a> to operate on the particular <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>in the Part's visual tree with the given name.That includes both providing tool handles and actually modifying properties on that object.<p>Parts are not resizable or rotatable by default: you need to set #resizable and/or #rotatable to true.<p class="boxread">For more discussion about tools, see <a href="../../intro/tools.html">Tools</a>.<p>A Part may be positioned (or a <a href="symbols/Link.html" class="linkConstructor">Link</a> may be routed) by a <a href="symbols/Layout.html" class="linkConstructor">Layout</a>.This will happen automatically if <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> or <a href="symbols/Group.html#layout" class="linkProperty">Group.layout</a> are set.The default <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> will position any nodes that were not given explicit positions or location.<p>If you set #isLayoutPositioned to false, this part will not participate in any of the standard layouts,so it will not be moved by a layout or affect other parts in a layout.In order for the part to get a #location or position you will need to supply it explicitly.<p>As parts are added to or removed from a diagram, the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> responsible for positioning the part is invalidated.This will cause the layout to be performed again in the near future, at the end of the transaction.This automatic layout invalidation also occurs as parts change their visibility (<a href="symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a>)or their size (<a href="symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>).If you do want there to be a <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> but you do not want an automatic layout to happenafter removing parts (for example), you can set #layoutConditions not to include the <a href="symbols/Part.html#LayoutRemoved" class="linkConstant">Part.LayoutRemoved</a> flag.In this particular case, you could set #layoutConditions to:<code>go.Part.LayoutStandard & ~go.Part.LayoutRemoved</code>.It may also reasonable for your application to set it to <a href="symbols/Part.html#LayoutNone" class="linkConstant">Part.LayoutNone</a>.Do not forget to consider applying the same conditions to links as well as to nodes and groups.<p>If you want to save the locations/positions of the parts in a diagram, it is commonplace todata bind the #location to a property on your node data with a TwoWay <a href="symbols/Binding.html" class="linkConstructor">Binding</a>(call <a href="symbols/Binding.html#makeTwoWay" class="linkMethod">Binding.makeTwoWay</a>). For example:<pre>$(go.Part, "Horizontal",  new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),  ...</pre><p>Then as the nodes are moved, whether manually by the user or automatically by a <a href="symbols/Layout.html" class="linkConstructor">Layout</a>,the model data is automatically updated with the location.<p class="boxread">For more discussion about related topics, see <a href="../../intro/selection.html">Selection</a>,<a href="../../intro/tools.html">Tools</a>, and<a href="../../intro/permissions.html">Permissions</a>.<p>Parts that are templates should have no relationships with other Parts.Only real Parts that are in a Diagram can belong to Groups or have any Adornments.Only real Nodes in a Diagram can be connected with Links.</div></div>
			
			<div><h2><a href="symbols/PathFigure.html" class="linkConstructor">PathFigure</a></h2><p>A PathFigure represents a section of a <a href="symbols/Geometry.html" class="linkConstructor">Geometry</a>.<span class="nodetails" id="xPathFigure"><a class="morelink" onclick="hst('PathFigure')">More...</a></span> <span class="details" id="PathFigure">It is a single connected series oftwo-dimensional geometric <a href="symbols/PathSegment.html" class="linkConstructor">PathSegment</a>s.</span><div class="details" id="dPathFigure"><p>The <a href="symbols/Geometry.html#figures" class="linkProperty">Geometry.figures</a> property is a list of PathFigures.<p>A PathFigure must not be modified once its containing <a href="symbols/Geometry.html" class="linkConstructor">Geometry</a>has been assigned to a <a href="symbols/Shape.html" class="linkConstructor">Shape</a>.</div></div>
			
			<div><h2><a href="symbols/PathSegment.html" class="linkConstructor">PathSegment</a></h2><p>A PathSegment represents a straight line or curved segment of a path betweentwo or more points that are part of a <a href="symbols/PathFigure.html" class="linkConstructor">PathFigure</a>.<span class="nodetails" id="xPathSegment"><a class="morelink" onclick="hst('PathSegment')">More...</a></span> <span class="details" id="PathSegment"></span><div class="details" id="dPathSegment"><p>A PathSegment must not be modified once its containing <a href="symbols/PathFigure.html" class="linkConstructor">PathFigure</a>'s<a href="symbols/Geometry.html" class="linkConstructor">Geometry</a> has been assigned to a <a href="symbols/Shape.html" class="linkConstructor">Shape</a>.</div></div>
			
			<div><h2><a href="symbols/Picture.html" class="linkConstructor">Picture</a></h2><p>A Picture is a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that shows an image, video-frame, or Canvas element.<span class="nodetails" id="xPicture"><a class="morelink" onclick="hst('Picture')">More...</a></span> <span class="details" id="Picture"></span><div class="details" id="dPicture"><p>You can specify what to show by either setting the #source URL propertyto a URL string or the #element property to an HTMLImageElement,HTMLCanvasElement, or HTMLVideoElement.<p>If a #source URL is set, the Picture will automatically create a correspondingHTMLImageElement and retain a reference to it in memory. If multiple Pictures specifythe same #source URL then they will all refer to the same HTMLImageElement.<p>Some created Pictures:<pre>var $ = go.GraphObject.make;  // for conciseness in defining GraphObjects// A shape with the figure set to "example.png". It will show a gray area until the image is loaded:$(go.Picture, { source: "example.png", background: "gray", width: 50, height: 50 })// Alternatively:$(go.Picture, "example.png", { background: "gray", width: 50, height: 50 })</pre><p>If an element is not completely loaded during Diagram initialization, a redraw may occur,and if an image's size is not known before loading, the containing Part of this Picturemay be resized, causing side effects such as layouts.This can be avoided by knowing the size of the image beforehand,and setting the Picture's <a href="symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a>.<p>With some images (notably sprite sheets) only a portion of the image is expected to be drawn.The #sourceRect property allows the programmer to specify a rectangular area ofthe source image that the Picture should display.<p>The #imageStretch property allows an image to be resized inside of its bounding box.This property does not change the size of the Picture element, it only resizes or re-scalesthe image to fit (or not) in its bounds.<p class="boxread">For examples of sizing and #imageStretch,see the <a href="../../intro/pictures.html">Introduction page on Pictures</a>.<p>The #errorFunction property allows one to set a function to call when a source fails to load.This is useful in instances where images cannot be guaranteed to work, such as withuser specified input. The error function can set the #source to a known good value,but care should be taken to avoid error infinite loops when doing so.</div></div>
			
			<div><h2><a href="symbols/Placeholder.html" class="linkConstructor">Placeholder</a></h2><p>If a Placeholder is in the visual tree of a <a href="symbols/Group.html" class="linkConstructor">Group</a>, it represents the area of all of the member <a href="symbols/Part.html" class="linkConstructor">Part</a>s of that Group.<span class="nodetails" id="xPlaceholder"><a class="morelink" onclick="hst('Placeholder')">More...</a></span> <span class="details" id="Placeholder">If a Placeholder is in the visual tree of an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>, it represents the area of the <a href="symbols/Adornment.html#adornedObject" class="linkProperty">Adornment.adornedObject</a>.It can only be used in the visual tree of a Group node or an Adornment.There can be at most one Placeholder in a Group or an Adornment.</span></div>
			
			<div><h2><a href="symbols/Point.html" class="linkConstructor">Point</a></h2><p>A Point represents an x- and y-coordinate pair in two-dimensional space.<span class="nodetails" id="xPoint"><a class="morelink" onclick="hst('Point')">More...</a></span> <span class="details" id="Point"></span><div class="details" id="dPoint"><p>Use the static functions <a href="symbols/Point.html#.parse" class="linkStatic">Point.parse</a> and <a href="symbols/Point.html#.stringify" class="linkStatic">Point.stringify</a> to convert to and froma standard string representation that is independent of the current locale.<p>When an instance of this class is the value of a property of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> class or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>or <a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a> or a <a href="symbols/Tool.html" class="linkConstructor">Tool</a> class, you should treat the objectas if it were frozen or read-only -- you cannot modify its properties.This allows the property to return a value without allocating a new instance.If you need to do your own calculations with the value, call #copy to makea new instance with the same values that you can modify.<p>Many methods modify the object's properties and then return a reference to "this" object.The only instance method to allocate a new object is the #copy method.The static <a href="symbols/Point.html#.parse" class="linkStatic">Point.parse</a> method also allocates a new object.<p>The "Debug" implementation of this class is significantly slower than the "Release" implementation,mostly due to additional error checking.<p>You cannot inherit from this class.</div></div>
			
			<div><h2><a href="symbols/Rect.html" class="linkConstructor">Rect</a></h2><p>A Rect describes a rectangular two-dimensional area as a top-left point (x and y values)and a size (width and height values).<span class="nodetails" id="xRect"><a class="morelink" onclick="hst('Rect')">More...</a></span> <span class="details" id="Rect"></span><div class="details" id="dRect"><p>Use the static functions <a href="symbols/Rect.html#.parse" class="linkStatic">Rect.parse</a> and <a href="symbols/Rect.html#.stringify" class="linkStatic">Rect.stringify</a> to convert to and froma standard string representation that is independent of the current locale.<p>When an instance of this class is the value of a property of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> class or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>or <a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a> or a <a href="symbols/Tool.html" class="linkConstructor">Tool</a> class, you should treat the objectas if it were frozen or read-only -- you cannot modify its properties.This allows the property to return a value without allocating a new instance.If you need to do your own calculations with the value, call #copy to makea new instance with the same values that you can modify.<p>Many methods modify the object's properties and then return a reference to "this" object.The only instance method to allocate a new object is the #copy method.The static <a href="symbols/Rect.html#.parse" class="linkStatic">Rect.parse</a> method also allocates a new object.The #center, #position, and #size properties all allocate and return a new object.<p>The "Debug" implementation of this class is significantly slower than the "Release" implementation,mostly due to additional error checking.<p>You cannot inherit from this class.</div></div>
			
			<div><h2><a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></h2><p>The RelinkingTool allows the user to reconnect an existing <a href="symbols/Link.html" class="linkConstructor">Link</a>if the <a href="symbols/Link.html#relinkableTo" class="linkProperty">Link.relinkableTo</a> and/or <a href="symbols/Link.html#relinkableFrom" class="linkProperty">Link.relinkableFrom</a> properties are true.<span class="nodetails" id="xRelinkingTool"><a class="morelink" onclick="hst('RelinkingTool')">More...</a></span> <span class="details" id="RelinkingTool"><p class="boxread">For a general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.</span><div class="details" id="dRelinkingTool"><p>By default an instance of this tool is installed as a mouse-down tool in the<a href="symbols/Diagram.html#toolManager" class="linkProperty">Diagram.toolManager</a> as the <a href="symbols/ToolManager.html#relinkingTool" class="linkProperty">ToolManager.relinkingTool</a>.<p>This tool makes use of two <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s,each including a relink handle (potentially one for each end of the link),shown when a link is selected.<p>This tool conducts a transaction while the tool is active.A successful relinking will result in a "LinkRelinked" <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> and a "Relinking" transaction.</div></div>
			
			<div><h2><a href="symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></h2><p>The ResizingTool is used to interactively change the size of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>in the selected <a href="symbols/Part.html" class="linkConstructor">Part</a> or <a href="symbols/Node.html" class="linkConstructor">Node</a> by setting its <a href="symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a> property.<span class="nodetails" id="xResizingTool"><a class="morelink" onclick="hst('ResizingTool')">More...</a></span> <span class="details" id="ResizingTool">You may want to save the size to the model by using a TwoWay <a href="symbols/Binding.html" class="linkConstructor">Binding</a> on the "desiredSize" propertyof the GraphObject that is named by <a href="symbols/Part.html#resizeObjectName" class="linkProperty">Part.resizeObjectName</a>.This tool does not operate on <a href="symbols/Link.html" class="linkConstructor">Link</a>s.</span><div class="details" id="dResizingTool"><p>You can limit the permitted minimum and maximum dimensions by setting#minSize and #maxSize.The resizing will also respect the <a href="symbols/GraphObject.html#minSize" class="linkProperty">GraphObject.minSize</a> and<a href="symbols/GraphObject.html#maxSize" class="linkProperty">GraphObject.maxSize</a> properties.Width or height values that are NaN do not constrain the resizing.<p>You can also limit the width and/or height to be multiples of a particular size bysetting <a href="symbols/Part.html#resizeCellSize" class="linkProperty">Part.resizeCellSize</a>.If either or both of these values are NaN, as they are by default,it will get the values from this tool's #cellSize.<p>If either or both of the width and height are still NaN,and if <a href="symbols/DraggingTool.html#isGridSnapEnabled" class="linkProperty">DraggingTool.isGridSnapEnabled</a> is true,it will use the <a href="symbols/DraggingTool.html#gridSnapCellSize" class="linkProperty">DraggingTool.gridSnapCellSize</a>.Finally it will consider the <a href="symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>'s <a href="symbols/Panel.html#gridCellSize" class="linkProperty">Panel.gridCellSize</a>if #isGridSnapEnabled is true.<p>Pressing the Shift key or resizing a <a href="symbols/Shape.html" class="linkConstructor">Shape</a> with a <a href="symbols/Shape.html#geometryStretch" class="linkProperty">Shape.geometryStretch</a> of<a href="symbols/GraphObject.html#Uniform" class="linkConstant">GraphObject.Uniform</a> or <a href="symbols/GraphObject.html#UniformToFill" class="linkConstant">GraphObject.UniformToFill</a> will maintain the aspect ratio during the resize.<p>This tool makes use of an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>, shown when the <a href="symbols/Part.html" class="linkConstructor">Part</a> or <a href="symbols/Node.html" class="linkConstructor">Node</a> is selected,that includes some number of resize handles.The resize handles are normally copies of <a href="symbols/ResizingTool.html#handleArchetype" class="linkProperty">ResizingTool.handleArchetype</a>,unless you specify a custom resize Adornment by setting <a href="symbols/Part.html#resizeAdornmentTemplate" class="linkProperty">Part.resizeAdornmentTemplate</a>.<p>This tool conducts a transaction while the tool is active.A successful resizing will result in a "PartResized" <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> and a "Resizing" transaction.</div></div>
			
			<div><h2><a href="symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></h2><p>The RotatingTool is used to interactively change the <a href="symbols/GraphObject.html#angle" class="linkProperty">GraphObject.angle</a> of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>by setting its <a href="symbols/GraphObject.html#angle" class="linkProperty">GraphObject.angle</a> property.<span class="nodetails" id="xRotatingTool"><a class="morelink" onclick="hst('RotatingTool')">More...</a></span> <span class="details" id="RotatingTool">You may want to save the angle to the model by using a TwoWay <a href="symbols/Binding.html" class="linkConstructor">Binding</a> on the "angle" propertyof the GraphObject that is named by <a href="symbols/Part.html#rotateObjectName" class="linkProperty">Part.rotateObjectName</a>.</span><div class="details" id="dRotatingTool"><p>This tool allows the user to rotate the <a href="symbols/Part.html#rotateObject" class="linkProperty">Part.rotateObject</a> of the selected <a href="symbols/Part.html" class="linkConstructor">Part</a>.Normally this works with <a href="symbols/Part.html" class="linkConstructor">Part</a>s or <a href="symbols/Node.html" class="linkConstructor">Node</a>s; it does not make sense for <a href="symbols/Link.html" class="linkConstructor">Link</a>s.The <a href="symbols/Part.html" class="linkConstructor">Part</a> must be <a href="symbols/Part.html#rotatable" class="linkProperty">Part.rotatable</a>, which is false by default.<p>You can limit the permitted angles by setting #snapAngleMultiple and #snapAngleEpsilon.For example, if you want to permit only angles that are multiples of 90 degrees,set #snapAngleMultiple to 90 and #snapAngleEpsilon to 45. Pressing the Shift key ignores these properties.<p>This tool makes use of an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a> that includes a rotation handle.It is shown when the selected <a href="symbols/Part.html" class="linkConstructor">Part</a> is <a href="symbols/Part.html#rotatable" class="linkProperty">Part.rotatable</a>.The rotate handle is normally a copy of <a href="symbols/RotatingTool.html#handleArchetype" class="linkProperty">RotatingTool.handleArchetype</a>.unless you specify a custom rotate Adornment by setting <a href="symbols/Part.html#rotateAdornmentTemplate" class="linkProperty">Part.rotateAdornmentTemplate</a>.<p>This tool conducts a transaction while the tool is active.A successful rotation will result in a "PartRotated" <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> and a "Rotating" transaction.</div></div>
			
			<div><h2><a href="symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></h2><p>The RowColumnDefinition class describes constraints on a row or a columnin a <a href="symbols/Panel.html" class="linkConstructor">Panel</a> of type <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xRowColumnDefinition"><a class="morelink" onclick="hst('RowColumnDefinition')">More...</a></span> <span class="details" id="RowColumnDefinition">It also provides information about the actual layout after theTable Panel has been arranged.</span></div>
			
			<div><h2><a href="symbols/Set.html" class="linkConstructor">Set</a></h2><p>An unordered iterable collection that cannot contain two instances of the same kind of value.<span class="nodetails" id="xSet"><a class="morelink" onclick="hst('Set')">More...</a></span> <span class="details" id="Set">It optionally enforces the type of elements that may be added to the Set.</span><div class="details" id="dSet"><p>An example usage:<pre>  var set = new go.Set("string");  // make a set of strings  set.add("orange");  set.add("apple");  set.add("orange");  // now set.count === 2  // and set.contains("orange") === true  // and set.contains("banana") === false</pre><p>You can iterate over the items in a Set:<pre>  var it = aSet.iterator;  while (it.next()) {    . . . it.value . . .  }</pre>Or:<pre>  aSet.each(function(val) {      . . . val . . .    });</pre><p>Although not precisely implementing the features of the EcmaScript 6 <b>Set</b> class,this <b>GoJS</b> Set class has synonyms for the following methods and property:<ul>  <li><b>add(val)</b>: #add</li>  <li><b>delete(val)</b>: #remove</li>  <li><b>has(val)</b>: #contains</li>  <li><b>clear()</b>: <a href="symbols/UndoManager.html#clear" class="linkMethod">clear</a></li>  <li><b>size</b>: #count</li></ul>The constructor does not take an optional Iterable argument, but you can get the same effect by:<code>new go.Set().addAll(iterable)</code></div></div>
			
			<div><h2><a href="symbols/Shape.html" class="linkConstructor">Shape</a></h2><p>A Shape is a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that shows a geometric figure.<span class="nodetails" id="xShape"><a class="morelink" onclick="hst('Shape')">More...</a></span> <span class="details" id="Shape">The <a href="symbols/Geometry.html" class="linkConstructor">Geometry</a> determines what is drawn;the properties #fill and #stroke(and other stroke properties) determine how it is drawn.</span><div class="details" id="dShape"><p>There are generally two types of shapes: Those that use a custom <a href="symbols/Geometry.html" class="linkConstructor">Geometry</a> by setting<a href="symbols/Shape.html#geometry" class="linkProperty">Shape.geometry</a>, and those that receive an automatically generated Geometry using the value of#figure, #toArrow, or #fromArrow. An explicitly set Geometry always supersedesthe figure and arrowhead properties.<p>Some created Shapes:<pre>var $ = go.GraphObject.make;  // for conciseness in defining GraphObjects// A shape with the figure set to RoundedRectangle:$(go.Shape, { figure: "RoundedRectangle", fill: "lightgreen" })// Alternatively:$(go.Shape, "RoundedRectangle", { fill: "lightgreen" })// A shape with a custom geometry, using geometryString:$(go.Shape,    { geometry: go.Geometry.parse("M120 0 L80 80 0 50z") })// A shape with a custom geometry, using geometryString:$(go.Shape,   { geometryString: "F M120 0 L80 80 0 50z",     fill: "lightgreen" })// A common link template, using two shapes,// the first for the link path and the second for the arrowheadmyDiagram.linkTemplate =  $(go.Link,    // The first shape in a link is special, its geometry is set by the Link's routing,    // so it does not need a geometry or figure set manually    $(go.Shape,      { strokeWidth: 2, stroke: 'gray' }),    $(go.Shape,      { toArrow: "Standard", fill: 'gray', stroke: null })  );</pre><p class="box">You can see more custom geometry examples and read about geometryStringon the <a href="../../intro/geometry.html">Geometry Path Strings Introduction page.</a><p>When automatically generating a Shape <a href="symbols/Geometry.html" class="linkConstructor">Geometry</a>, the value of #toArrow takes precedence,then #fromArrow, then #figure. If the value of #toArrow or #fromArrow is "None"then it is ignored, and the "None" value of #figure is identical to "Rectangle".<p>All of the predefined figures are shown in the <a href="../../samples/shapes.html">Shapes sample</a>.You can define your own named figures by calling the static function <a href="symbols/Shape.html#.defineFigureGenerator" class="linkStatic">Shape.defineFigureGenerator</a>.Get a <a href="symbols/Map.html" class="linkConstructor">Map</a> of named figures by calling the static function <a href="symbols/Shape.html#.getFigureGenerators" class="linkStatic">Shape.getFigureGenerators</a>.<p>All of the predefined arrowheads are shown in the <a href="../../samples/arrowheads.html">Arrowheads sample</a>.You can define your own named arrowheads by calling the static function <a href="symbols/Shape.html#.defineArrowheadGeometry" class="linkStatic">Shape.defineArrowheadGeometry</a>.Get a <a href="symbols/Map.html" class="linkConstructor">Map</a> of named arrowheads by calling the static function <a href="symbols/Shape.html#.getArrowheadGeometries" class="linkStatic">Shape.getArrowheadGeometries</a>.<p>You can see a copy of all of the built-in arrowhead definitions in this file: <a href="../../extensions/Arrowheads.js">Arrowheads.js</a>.<p>The Shape properties #parameter1, and #parameter2 determine details of theconstruction of some #figure geometries.Specifically, they often set the #spot1, #spot2 for the Shape.These spots determine the "inner area" of an Auto panel when a Shape is the main object.See the <a href="../../intro/panels.html">Auto Panels section of the Panels Introduction page</a> for more details.<p>Shapes use their geometric bounds when determining hit testing,but use rectangular bounds when participating in (panel) layouts.</div></div>
			
			<div><h2><a href="symbols/Size.html" class="linkConstructor">Size</a></h2><p>A Size describes a width and a height in two-dimensional coordinates.<span class="nodetails" id="xSize"><a class="morelink" onclick="hst('Size')">More...</a></span> <span class="details" id="Size">The width and height must both be non-negative.</span><div class="details" id="dSize"><p>Use the static functions <a href="symbols/Size.html#.parse" class="linkStatic">Size.parse</a> and <a href="symbols/Size.html#.stringify" class="linkStatic">Size.stringify</a> to convert to and froma standard string representation that is independent of the current locale.<p>When an instance of this class is the value of a property of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> class or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>or <a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a> or a <a href="symbols/Tool.html" class="linkConstructor">Tool</a> class, you should treat the objectas if it were frozen or read-only -- you cannot modify its properties.This allows the property to return a value without allocating a new instance.If you need to do your own calculations with the value, call #copy to makea new instance with the same values that you can modify.<p>Many methods modify the object's properties and then return a reference to "this" object.The only instance method to allocate a new object is the #copy method.The static <a href="symbols/Size.html#.parse" class="linkStatic">Size.parse</a> method also allocates a new object.<p>The "Debug" implementation of this class is significantly slower than the "Release" implementation,mostly due to additional error checking.<p>You cannot inherit from this class.</div></div>
			
			<div><h2><a href="symbols/Spot.html" class="linkConstructor">Spot</a></h2><p>A Spot represents a relative point from (0,0) to (1,1) within the bounds ofa rectangular area plus an absolute offset.<span class="nodetails" id="xSpot"><a class="morelink" onclick="hst('Spot')">More...</a></span> <span class="details" id="Spot"></span><div class="details" id="dSpot"><p>Use the static functions <a href="symbols/Spot.html#.parse" class="linkStatic">Spot.parse</a> and <a href="symbols/Spot.html#.stringify" class="linkStatic">Spot.stringify</a> to convert to and froma standard string representation that is independent of the current locale.<p>When an instance of this class is the value of a property of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> class or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>or <a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a> or a <a href="symbols/Tool.html" class="linkConstructor">Tool</a> class, you should treat the objectas if it were frozen or read-only -- you cannot modify its properties.This allows the property to return a value without allocating a new instance.If you need to do your own calculations with the value, call #copy to makea new instance with the same values that you can modify.<p>Many methods modify the object's properties and then return a reference to "this" object.The only instance method to allocate a new object is the #copy method.The static <a href="symbols/Spot.html#.parse" class="linkStatic">Spot.parse</a> method also allocates a new object.<p>The "Debug" implementation of this class is significantly slower than the "Release" implementation,mostly due to additional error checking.<p>You cannot inherit from this class.</div></div>
			
			<div><h2><a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a></h2><p>A TextBlock is a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that displays a #text string in a given #font.<span class="nodetails" id="xTextBlock"><a class="morelink" onclick="hst('TextBlock')">More...</a></span> <span class="details" id="TextBlock"></span><div class="details" id="dTextBlock"><p>The size and appearance of the text is specified by #font,which takes a well-formed CSS string as its value.The order of the CSS properties given is important for cross-browser compatibility,and should be given in this order:<p><em>"font-style font-variant font-weight font-size font-family"</em><p>For example, "Italic small-caps bold 32px Georgia, Serif" is a valid font stringusing every CSS font property. Note that not all browsers may support every property.<p>Text is drawn using the #stroke brush, which may be any CSS color string or a <a href="symbols/Brush.html" class="linkConstructor">Brush</a>.Some created TextBlocks:<pre>var $ = go.GraphObject.make;  // for conciseness in defining GraphObjects// A TextBlock with text and stroke properties set:$(go.TextBlock, { text: "Hello World", stroke: "gray" })// Alternatively:$(go.TextBlock, "Hello World", { stroke: "gray" })</pre><p>TextBlocks typically receive a natural size based on their text and font strings,but often a width is given in order to cause the text to wrap at a certain place.In order for wrapping to occur, the #wrap property must not be <a href="symbols/TextBlock.html#None" class="linkConstant">TextBlock.None</a>.<p>TextBlocks can be edited by users using the <a href="symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>.The HTMLElement that a given TextBlock uses as its text editor can be customizedby setting the #textEditor property. For an example of custom text editing tool use,see the <a href="../../samples/customTextEditingTool.html">Custom TextEditingTool Sample</a>.<p class="boxread">For examples of TextBlock possibilities and functionality,see the <a href="../../intro/textBlocks.html">Introduction page on TextBlocks</a>.</div></div>
			
			<div><h2><a href="symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></h2><p>The TextEditingTool is used to let the user interactively edit text in place.<span class="nodetails" id="xTextEditingTool"><a class="morelink" onclick="hst('TextEditingTool')">More...</a></span> <span class="details" id="TextEditingTool">This sets the <a href="symbols/TextBlock.html#text" class="linkProperty">TextBlock.text</a> property; you may want to save the changed text to the modelby using a TwoWay <a href="symbols/Binding.html" class="linkConstructor">Binding</a> on the "text" property of editable TextBlocks.</span><div class="details" id="dTextEditingTool"><p>Typically this is used by setting the <a href="symbols/TextBlock.html#editable" class="linkProperty">TextBlock.editable</a> property to trueon a particular <c>TextBlock</c> in a part.When the part is selected and the user clicks on the <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a>or invokes the <a href="symbols/CommandHandler.html#editTextBlock" class="linkMethod">CommandHandler.editTextBlock</a> command,this tool is started and it uses an HTMLTextArea to perform in-place text editing.(For more details see the description for <a href="symbols/TextEditingTool.html#doActivate" class="linkMethod">TextEditingTool.doActivate</a>.)<p>The <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a> is accessible as the <a href="symbols/TextEditingTool.html#textBlock" class="linkProperty">TextEditingTool.textBlock</a> property.The text editor is accessible as the <a href="symbols/TextEditingTool.html#currentTextEditor" class="linkProperty">TextEditingTool.currentTextEditor</a> property.From the text editor control one can access the <c>TextBlock</c> being edited via the'textEditingTool' property to get to this tool, from which one can usethe <a href="symbols/TextEditingTool.html#textBlock" class="linkProperty">TextEditingTool.textBlock</a> property.<p>You can disable mouse clicking from starting this text editing toolby setting <a href="symbols/Tool.html#isEnabled" class="linkProperty">Tool.isEnabled</a> to false.You can disable the F2 key from starting this text editing toolby making sure <a href="symbols/Part.html#canEdit" class="linkMethod">Part.canEdit</a> returns false,by either setting <a href="symbols/Diagram.html#allowTextEdit" class="linkProperty">Diagram.allowTextEdit</a> to falseor by setting <a href="symbols/Part.html#textEditable" class="linkProperty">Part.textEditable</a> to false.<p>If you want to programmatically start the user editing a particular TextBlock,call CommandHandler.editTextBlock.That command method is also invoked by the F2 key on the keyboard.</div></div>
			
			<div><h2><a href="symbols/Tool.html" class="linkConstructor">Tool</a></h2><p>Tools handle mouse, keyboard, and touch events.<span class="nodetails" id="xTool"><a class="morelink" onclick="hst('Tool')">More...</a></span> <span class="details" id="Tool">The currently running tool, <a href="symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a>, receives all input events from the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>via canonicalized <a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a>s.</span><div class="details" id="dTool"><p>Most tools are "mode-less" tools that are managed by the <a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a>,which chooses the current tool based on the kind and position of the mouse event and the parts in the diagram.The <a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a> has properties holding instances of most of the pre-defined <a href="symbols/Tool.html" class="linkConstructor">Tool</a> classes.These classes include:<ul><li>In the <a href="symbols/ToolManager.html#mouseDownTools" class="linkProperty">ToolManager.mouseDownTools</a> <a href="symbols/List.html" class="linkConstructor">List</a>:<ul>  <li><a href="symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>  <li><a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>  <li><a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>  <li><a href="symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>  <li><a href="symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li></ul></li><li>In the <a href="symbols/ToolManager.html#mouseMoveTools" class="linkProperty">ToolManager.mouseMoveTools</a> <a href="symbols/List.html" class="linkConstructor">List</a>:<ul>  <li><a href="symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>  <li><a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>  <li><a href="symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>  <li><a href="symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li></ul></li><li>In the <a href="symbols/ToolManager.html#mouseUpTools" class="linkProperty">ToolManager.mouseUpTools</a> <a href="symbols/List.html" class="linkConstructor">List</a>:<ul>  <li><a href="symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>  <li><a href="symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>  <li><a href="symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>  <li><a href="symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li></ul></li></ul>The ToolManager chooses a tool to run as the diagram's current tool by finding in its lists of tools the first toolwhose #canStart method returns true.  The ToolManager then sets <a href="symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a> to be that tool.<p>A tool is in the "running" state when it is the value of <a href="symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a>.The <a href="symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a> property setter will call #doStop on the old tooland then call #doStart on the new tool.<p>A tool can then go into the "active" state once it decides it can actually do something.This happens with a call to #doActivate, normally called by the ToolManager.Later it is deactivated (#doDeactivate) and then stopped.#isActive should be true when the tool is "active".Often tools should ignore certain common events, such as calls to #doMouseMove,unless the tool #isActive.<p>You can prevent a "mode-less" tool (i.e. one managed by the <a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a>)from being started by the ToolManager by setting <a href="symbols/UndoManager.html#isEnabled" class="linkProperty">isEnabled</a> to false.<p>You can also go into a particular "mode" by setting <a href="symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a> explicitly,thereby circumventing the normal operation of the <a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a>.This ignores the <a href="symbols/UndoManager.html#isEnabled" class="linkProperty">isEnabled</a> property and does not call the #canStart predicate.The behavior will depend on the tool -- not all of the predefined tools support operating as a "modal" tool.<p>Tools cannot be shared amongst multiple Diagrams.<p>If you define a Tool subclass, you may override any of the methods whose names start with "do"and any other methods that are documented to be overridable, such as #canStart.However you must seriously consider calling the base method in order to gets its default behavior.There may be situations where not calling the base method may cause subtle bugs.But that depends on the method and the tool.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call the base method.</div></div>
			
			<div><h2><a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a></h2><p>This special <a href="symbols/Tool.html" class="linkConstructor">Tool</a> is responsible for managing all of the Diagram'smode-less tools, which you can access as the <a href="symbols/Diagram.html#toolManager" class="linkProperty">Diagram.toolManager</a>.<span class="nodetails" id="xToolManager"><a class="morelink" onclick="hst('ToolManager')">More...</a></span> <span class="details" id="ToolManager"></span><div class="details" id="dToolManager"><p>Mode-less tools are tools that are present in one of the following lists:#mouseDownTools, #mouseMoveTools, or #mouseUpTools.This ToolManager tool is normally the <a href="symbols/Diagram.html#defaultTool" class="linkProperty">Diagram.defaultTool</a>,so it is also usually the <a href="symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a> when the user is doing "nothing".<p>When this tool is running as the current tool, it handles mouse-down,mouse-move, and mouse-up events and the corresponding touch events.For each event it iterates over each of the tools in the corresponding list,calling the tool's <a href="symbols/Tool.html#canStart" class="linkMethod">Tool.canStart</a> predicate.If that predicate returns true, it starts that tool by making it thediagram's current tool.It then activates the tool and passes on the event to the tool by callingthe corresponding method (either <a href="symbols/Tool.html#doMouseDown" class="linkMethod">Tool.doMouseDown</a>,<a href="symbols/Tool.html#doMouseMove" class="linkMethod">Tool.doMouseMove</a>, or <a href="symbols/Tool.html#doMouseUp" class="linkMethod">Tool.doMouseUp</a>).<p>Because this tool is typically the one running as the diagram's current toolwhen the user isn't "doing" anything, this tool can also handle other events,such as mouse wheel events and keyboard commands.<p>Keyboard events are just passed on to the <a href="symbols/Diagram.html#commandHandler" class="linkProperty">Diagram.commandHandler</a>'s<a href="symbols/CommandHandler.html#doKeyDown" class="linkMethod">CommandHandler.doKeyDown</a> or <a href="symbols/CommandHandler.html#doKeyUp" class="linkMethod">CommandHandler.doKeyUp</a> method.<p>This tool also is responsible for showing tooltips.Tooltip <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s may be declared as any <a href="symbols/GraphObject.html#toolTip" class="linkProperty">GraphObject.toolTip</a>,or as the <a href="symbols/Diagram.html#toolTip" class="linkProperty">Diagram.toolTip</a> if the mouse or finger remains motionless in the background of the diagram.You can set #toolTipDuration to control how long the tooltip remains visible after being motionless.<p>This tool does not utilize any tool handles.This tool does not conduct any transactions.But of course some of the tools that the ToolManager starts can show tool handles and/orconduct their own transactions.</div></div>
			
			<div><h2><a href="symbols/Transaction.html" class="linkConstructor">Transaction</a></h2><p>A Transaction holds a list of <a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>s collected during a transaction,as the value of the read-only #changes property.<span class="nodetails" id="xTransaction"><a class="morelink" onclick="hst('Transaction')">More...</a></span> <span class="details" id="Transaction"></span><div class="details" id="dTransaction"><p>Start a transaction by calling <a href="symbols/UndoManager.html#startTransaction" class="linkMethod">UndoManager.startTransaction</a>(or <a href="symbols/Model.html#startTransaction" class="linkMethod">Model.startTransaction</a> or <a href="symbols/Diagram.html#startTransaction" class="linkMethod">Diagram.startTransaction</a>, which call that method).Be sure to finish a transaction with a matching call to <a href="symbols/UndoManager.html#commitTransaction" class="linkMethod">UndoManager.commitTransaction</a>(or <a href="symbols/Model.html#commitTransaction" class="linkMethod">Model.commitTransaction</a> or <a href="symbols/Diagram.html#commitTransaction" class="linkMethod">Diagram.commitTransaction</a>),or a call to <a href="symbols/UndoManager.html#rollbackTransaction" class="linkMethod">UndoManager.rollbackTransaction</a>(or the same named methods on <a href="symbols/Model.html" class="linkConstructor">Model</a> or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>).<p>If you are performing multiple or repeated changes to a model or diagram,surround all of the code with calls to start and commit the transaction --do not perform repeated calls to start-commit-start-commit.Typically each change caused by the user, such as a button click or a change of focus or a mouse drag,should perform one transaction in which all changes are made.All of the predefined commands and tools perform transactions.<p>Undoing or redoing a transaction is done by calling <a href="symbols/UndoManager.html#undo" class="linkMethod">UndoManager.undo</a> or <a href="symbols/UndoManager.html#redo" class="linkMethod">UndoManager.redo</a>.Those methods call the <a href="symbols/UndoManager.html#undo" class="linkMethod">undo</a> or <a href="symbols/UndoManager.html#redo" class="linkMethod">redo</a> methods here.<p>The <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a> holds a list of Transactions in its <a href="symbols/UndoManager.html#history" class="linkProperty">UndoManager.history</a>.</div></div>
			
			<div><h2><a href="symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a></h2><p>This holds <a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>-specific information about <a href="symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xTreeEdge"><a class="morelink" onclick="hst('TreeEdge')">More...</a></span> <span class="details" id="TreeEdge"></span><div class="details" id="dTreeEdge"><p>This class inherits from <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>.</div></div>
			
			<div><h2><a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></h2><p>This layout positions nodes of a tree-structured graph in layers (rows or columns).<span class="nodetails" id="xTreeLayout"><a class="morelink" onclick="hst('TreeLayout')">More...</a></span> <span class="details" id="TreeLayout">For a discussion and examples of the most commonly used properties, see <a href="../../intro/trees.html">Trees</a> page in the Introduction.There are many samples that use TreeLayout.If you want to experiment interactively with most of the properties, try the <a href="../../samples/tLayout.html">Tree Layout</a> sample.</span><div class="details" id="dTreeLayout"><p>This layout makes use of a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of<a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es and <a href="symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a>s that normallycorrespond to the <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s of the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.<p>The most commonly set properties for controlling the results of a TreeLayout are:<ul><li>#angle: the direction in which the tree grows, from parent to child;    the default value of zero means that the tree grows towards the right, with the children of a node arranged in a layer that is a column.    An angle of 0 or 180 means that children form vertical layers -- breadth is height and depth is width;    an angle of 90 or 270 means that children form horizontal layers -- breadth is width and depth is height.</li><li>#layerSpacing: the distance between layers -- between a parent node and its child nodes.</li><li>#nodeSpacing: the distance between nodes within a layer -- between siblings.</li><li>#alignment: the relative position of a parent node with its children.</li><li>#sorting and #comparer: specify the order of the immediate children of a parent node.</li><li>#compaction: whether subtrees should be packed closer together if there is room.</li><li>#layerStyle: whether the children of one node are aligned with the children of a sibling node.</li><li>#setsPortSpot, #portSpot, #setsChildPortSpot, and #childPortSpot: this controls whether to set the <a href="symbols/Link.html#fromSpot" class="linkProperty">Link.fromSpot</a> and <a href="symbols/Link.html#toSpot" class="linkProperty">Link.toSpot</a> to be sensible for the #angle.</li><li>#nodeIndent and #nodeIndentPastParent: if the #alignment is <a href="symbols/TreeLayout.html#AlignmentStart" class="linkConstant">TreeLayout.AlignmentStart</a> or <a href="symbols/TreeLayout.html#AlignmentEnd" class="linkConstant">TreeLayout.AlignmentEnd</a>, control how much extra space the first child is given when positioned.</li><li>#breadthLimit, #rowSpacing: try to limit the total breadth of a subtree to a certain distance;    when there are too many children or when they are too broad, this puts children into additional rows (or columns, depending on the angle)    thereby limiting the breadth while increasing the depth of the tree.</li></ul><p>When you set one of the TreeLayout properties listed above, that property normally applies to all of the nodes in the tree.What if you want #alignment to be <a href="symbols/TreeLayout.html#AlignmentCenterChildren" class="linkConstant">TreeLayout.AlignmentCenterChildren</a> for the root node but <a href="symbols/TreeLayout.html#AlignmentBus" class="linkConstant">TreeLayout.AlignmentBus</a> for the other nodes in the tree?Or what if you want want #layerSpacing to be 50 for all layers except for the layer separating "leaf" nodes from their parent?<p>One common solution is to set #treeStyle.For the former scenario, you could set #treeStyle to <a href="symbols/TreeLayout.html#StyleRootOnly" class="linkConstant">TreeLayout.StyleRootOnly</a>; the value of #alignment would only apply to the root node.For the latter scenario, you could set it to <a href="symbols/TreeLayout.html#StyleLastParents" class="linkConstant">TreeLayout.StyleLastParents</a>;the value of #layerSpacing would apply to all nodes except those that have children but that do not have grandchildren.How do you then set the alignment or layerSpacing for the other nodes?By setting the TreeLayout properties whose names start with "alternate...".In these cases that would mean setting #alternateAlignment or #alternateLayerSpacing.<p>These TreeLayout properties actually apply to the <a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> that the TreeLayout uses to represent a <a href="symbols/Node.html" class="linkConstructor">Node</a> within the TreeNetwork.All of those TreeLayout properties are actually stored in #rootDefaults; all of the "alternate..." properties are stored in #alternateDefaults.Depending on the value of #treeStyle, the actual TreeVertex properties for each Node are copied appropriately from either rootDefaults or alternateDefaults.In the default case where treeStyle is <a href="symbols/TreeLayout.html#StyleLayered" class="linkConstant">TreeLayout.StyleLayered</a>, the alternateDefaults are ignored.(Note that treeStyle, and a few other properties such as #path and #arrangement, apply to the whole layout, not to an individual node/vertex.)<p>The use of #treeStyle and "alternate..." TreeLayout properties will cover a lot of common needs for tree layout customization.However, there may be times when that is not enough.Imagine a situation where you want a special <a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> property value for a particular <a href="symbols/Node.html" class="linkConstructor">Node</a>.The solution is to override #assignTreeVertexValues, where you can examine the given <a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>,including its corresponding <a href="symbols/LayoutVertex.html#node" class="linkProperty">LayoutVertex.node</a>, to decide what TreeVertex property values should apply.</div></div>
			
			<div><h2><a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a></h2><p>TreeModels support tree-structured graphs of nodes and links.<span class="nodetails" id="xTreeModel"><a class="morelink" onclick="hst('TreeModel')">More...</a></span> <span class="details" id="TreeModel">Each node can have at most one "tree parent"; cycles are not permitted.The reference to the parent node's key is a property of the child node data.</span><div class="details" id="dTreeModel"><p>TreeModels, unlike <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>s, do not support arbitrary link relationships between nodes,nor is there a separate link data object for each parent-child relationship.Furthermore there is no support for grouping or label nodes.<p>The #nodeParentKeyProperty property names the property on the node data whose valueis the key of the "tree parent" node.The default value for this property is "parent".<p>For example, one can define a graph consisting of one parent node with two child nodes:<pre class="javascript"> model.nodeDataArray = [   { key: "Alpha" },   { key: "Beta", parent: "Alpha" },   { key: "Gamma", parent: "Alpha" } ];</pre><p>If you need to show a more complicated graph structure than a tree, use a <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>.If you want to have multiple links between the same pair of nodes,or if you want to associate more information with each link and cannot put the information on the child node,you will need to have a separate link data object for each link,and that would require the use of <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>.</div></div>
			
			<div><h2><a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a></h2><p>This holds <a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>-specific information about <a href="symbols/Node.html" class="linkConstructor">Node</a>s.<span class="nodetails" id="xTreeVertex"><a class="morelink" onclick="hst('TreeVertex')">More...</a></span> <span class="details" id="TreeVertex"></span><div class="details" id="dTreeVertex"><p>This class inherits from <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>.</div></div>
			
			<div><h2><a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a></h2><p>UndoManager observes and records model and diagram changes in transactions andsupports undo/redo operations.<span class="nodetails" id="xUndoManager"><a class="morelink" onclick="hst('UndoManager')">More...</a></span> <span class="details" id="UndoManager">You will need to set the <a href="symbols/UndoManager.html#isEnabled" class="linkProperty">isEnabled</a> property to truein order for users to perform an undo or a redo.</span><div class="details" id="dUndoManager"><p>Typically an operation will call <a href="symbols/UndoManager.html#startTransaction" class="linkMethod">startTransaction</a>,make some changes to the <a href="symbols/Model.html" class="linkConstructor">Model</a> or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>,and then call <a href="symbols/UndoManager.html#commitTransaction" class="linkMethod">commitTransaction</a>.Any <a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>s that occur will be recorded in a<a href="symbols/Transaction.html" class="linkConstructor">Transaction</a> object.If for some reason you do not wish to complete the transactionsuccessfully, you can call <a href="symbols/UndoManager.html#rollbackTransaction" class="linkMethod">rollbackTransaction</a> insteadof <a href="symbols/UndoManager.html#commitTransaction" class="linkMethod">commitTransaction</a>.<p>The <a href="symbols/UndoManager.html#history" class="linkProperty">history</a> property is a list of <a href="symbols/Transaction.html" class="linkConstructor">Transaction</a>s.<a href="symbols/UndoManager.html#commitTransaction" class="linkMethod">commitTransaction</a> will add the <a href="symbols/UndoManager.html#currentTransaction" class="linkProperty">currentTransaction</a>to the <a href="symbols/UndoManager.html#history" class="linkProperty">history</a> list.<a href="symbols/UndoManager.html#rollbackTransaction" class="linkMethod">rollbackTransaction</a> will undo the changes remembered in the<a href="symbols/UndoManager.html#currentTransaction" class="linkProperty">currentTransaction</a> and then discard it, without changing the <a href="symbols/UndoManager.html#history" class="linkProperty">history</a>.You can limit how many transactions are remembered in the historyby setting <a href="symbols/UndoManager.html#maxHistoryLength" class="linkProperty">maxHistoryLength</a>.<p>Transactions may be nested.Be sure to call either <a href="symbols/UndoManager.html#commitTransaction" class="linkMethod">commitTransaction</a> or <a href="symbols/UndoManager.html#rollbackTransaction" class="linkMethod">rollbackTransaction</a>for each call to <a href="symbols/UndoManager.html#startTransaction" class="linkMethod">startTransaction</a>.Avoid repeated start-commit-start-commit calls as a result of a user's actions.Instead, start, make all changes, and then commit.<p>If you want to restore the diagram to the state before the latest completetransaction, call <a href="symbols/UndoManager.html#undo" class="linkMethod">undo</a>.Call <a href="symbols/UndoManager.html#redo" class="linkMethod">redo</a> to change the diagram to a later state.If after some number of undo's you start a transaction,all of the history after the current state is discarded,and a new transaction may be recorded.You cannot undo or redo during a transaction.<p>Initially each <a href="symbols/Model.html" class="linkConstructor">Model</a> has its own UndoManager.UndoManagers may be shared by multiple Models by replacingthe standard <a href="symbols/Model.html#undoManager" class="linkProperty">Model.undoManager</a> created by the model constructor.<p>There are several informational properties:<ul><li><a href="symbols/UndoManager.html#isInTransaction" class="linkProperty">isInTransaction</a> is true when a top-level transaction has been started that has not yet been committed or rolled-back.</li><li><a href="symbols/UndoManager.html#currentTransaction" class="linkProperty">currentTransaction</a> holds the flattened list of all <a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>sthat have happened within the current transaction.</li><li><a href="symbols/UndoManager.html#transactionLevel" class="linkProperty">transactionLevel</a> indicates the current depth of nesting.</li><li><a href="symbols/UndoManager.html#nestedTransactionNames" class="linkProperty">nestedTransactionNames</a> holds the stack of transaction names supplied to<a href="symbols/UndoManager.html#startTransaction" class="linkMethod">startTransaction</a> calls.</li><li><a href="symbols/UndoManager.html#history" class="linkProperty">history</a> holds only complete top-level transactions.</li><li><a href="symbols/UndoManager.html#isUndoingRedoing" class="linkProperty">isUndoingRedoing</a> is true during a call to <a href="symbols/UndoManager.html#undo" class="linkMethod">undo</a> or <a href="symbols/UndoManager.html#redo" class="linkMethod">redo</a>.</li><li><a href="symbols/UndoManager.html#historyIndex" class="linkProperty">historyIndex</a> indicates which <a href="symbols/Transaction.html" class="linkConstructor">Transaction</a> in the <a href="symbols/UndoManager.html#history" class="linkProperty">history</a> is the next to be "undone";this is decremented by each undo and incremented by a redo.</li><li><a href="symbols/UndoManager.html#transactionToUndo" class="linkProperty">transactionToUndo</a> and <a href="symbols/UndoManager.html#transactionToRedo" class="linkProperty">transactionToRedo</a> indicate which <a href="symbols/Transaction.html" class="linkConstructor">Transaction</a> may be undone or redone next, if any.</li><li><a href="symbols/UndoManager.html#models" class="linkProperty">models</a> returns an iterator over all of the <a href="symbols/Model.html" class="linkConstructor">Model</a>s that this UndoManager is handling.</li></ul></div></div>
			

		</div>
		<div id="footer" class="fineprint" style="clear:both">
			Copyright &copy; 1998-2016 by Northwoods Software Corporation.
		</div>
	</body>
</html>